简介
JavaScript 改变HTML内容
getElementById()是多个JavaScript HTML方法之一.
实例
1
| document.getElementById("demo").innerHTML = "hello JavaScript";
|
JavaScript 改变 HTML 属性
实例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
|
JavaScript 改变 HTML 样式 (CSS)
document.getElementById("demo").style.fontSize = "25px";
JavaScript隐藏HTML元素
document.getElementById("demo").style.display="none";
显示HTML元素
document.getElementById("demo").style.display="block";
使用
<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间.
实例
1
2
3
| <script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
|
注释：旧的 JavaScript 例子也许会使用 type 属性：<script type=”text/javascript”>。
注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
**`` 或 `` 中的 JavaScript**
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
<head> 中的 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!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>
|
tips：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
1
2
3
| function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
|
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在