精通JavaScript能做什么?

getElementById() 是多个 JavaScript HTML 方法之一。使用该方法来“查找” id="demo" 的 HTML 元素,并可改变元素内容、属性、样式;还可以隐藏元素、显示隐藏的元素。
1.JavaScript 能够改变HTML内容(.innerHTML = 'Hello JavaScript!')
(1)全部双引号
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能做什么?</h1>
<p id="demo">JavaScript 可以更改 HTML 内容。</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击这里</button>
</body>
</html>
(2)同时接受双引号和单引号
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能做什么?</h1>
<p id="demo">JavaScript 可以更改 HTML 内容。</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击这里</button>
</body>
</html>
 
2.JavaScript 能够改变HTML属性(.src='/i/eg_bulboff.gif')
<!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>
 
3.JavaScript能够改变HTML样式 (.style.fontSize='35px')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">点击我!</button>
</body>
</html> 
 
4.JavaScript能够隐藏HTML元素(.style.display='none')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">点击我!</button>
</body>
</html>
 
5.JavaScript能够隐藏HTML元素(.style.display='block')
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p>JavaScript能够显示隐藏的HTML元素。</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">点击我!</button>
</body>
</html>