67,944
社区成员
发帖
与我相关
我的任务
分享学习打卡——JavaScript第一天
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript 同时接受双引号和单引号
document.getElementById("demo").innerHTML = 'Hello JavaScript';
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：
document.getElementById("demo").style.fontSize = "25px";
JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素：
document.getElementById("demo").style.display="none";
JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素：
document.getElementById("demo").style.display="block";
<script>标签
在 HTML 中 JavaScript 代码必须位于<script>与</script>标签之间
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
JavaScript函数和事件
JavaScript 函数是一种JavaScript代码块，他可以在调用时被执行
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
<body> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用：
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>
外部脚本的优势
- 分离了HTML和代码
- 使HTML和JavaScript更易于阅读和维护
- 已缓存的JavaScript文件可加速页面加载
- 外部引用
- 可通过完整的URL或相对于当前网页的路径引用外部脚本：
...全文
请发表友善的回复…
发表回复
