JavaScript 简介


目录

    显示目录

此页面包含 JavaScript 功能的一些示例。

JavaScript 可以改变 HTML 内容

getElementById() 是众多 JavaScript HTML 方法之一。

下面的示例“查找”一个 HTML 元素(id=“demo”), 并将元素内容 (innerHTML) 更改为“Hello JavaScript”:

例子

document.getElementById("demo").innerHTML = "Hello JavaScript";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript 接受双引号和单引号:

例子

document.getElementById('demo').innerHTML = 'Hello JavaScript';

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript 可以更改 HTML 属性值

在此示例中,JavaScript 更改 <img> 标记的 src(源)属性值:

电灯泡

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>


JavaScript 可以更改 HTML 样式 (CSS)

更改 HTML 元素的样式是更改 HTML 的一种变体 属性:

例子

document.getElementById("demo").style.fontSize = "35px";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html> 

JavaScript 可以隐藏 HTML 元素

可以通过更改 display 样式来隐藏 HTML 元素:

例子

document.getElementById("demo").style.display = "none";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html> 

JavaScript 可以显示 HTML 元素

显示隐藏的 HTML 元素也可以通过更改 display 样式来完成:

例子

document.getElementById("demo").style.display = "block";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

你可知道?

JavaScript 和 Java 在概念上是完全不同的语言 和设计。

JavaScript 由 Brendan Eich 于 1995 年发明,并成为 ECMA 标准 1997年。

ECMA-262 是该标准的正式名称。 ECMAScript 是该语言的正式名称。