0%

JavaScript Note

简介

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

如需使用外部脚本,请在