Javascript-基本使用

時間 2019-11-06

原文原文鏈接

本章向您提供了展現 JavaScript 能力的部分實例。

JavaScript 可以改變 HTML 內容

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

本例使用該方法來「查找」 id="demo" 的 HTML 元素，並把元素內容（innerHTML）更改成 "Hello JavaScript"：spa

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能作什麼</h2>

<p id="demo">JavaScript 可以改變 HTML 內容。</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>點擊我！</button>

</body>
</html>

提示：JavaScript 同時接受雙引號和單引號：code

JavaScript 可以改變 HTML 屬性

本例經過改變 <img> 標籤的 src 屬性（source）來改變一張 HTML 圖像：htm

燈泡

blog

<!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)

改變 HTML 元素的樣式，是改變 HTML 屬性的一種變種：ip

<!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>

JavaScript 可以隱藏 HTML 元素

<!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>

JavaScript 可以顯示 HTML 元素

可經過改變 display 樣式來顯示隱藏的 HTML 元素：get

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。