Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript HTML DOM 改變CSS

HTML DOM 允許JavaScript 改變HTML 元素的樣式。


改變HTML 樣式

如需改變HTML 元素的樣式,請使用這個語法:

document.getElementById(id).style.property=新样式

下面的例子會改變<p> 元素的樣式:

實例

< ! DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 本教程(w3big.com) </ title > </ head > < body > < p id = " p1 " > Hello World! </ p > < p id = " p2 " > Hello World! </ p > < script > document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize= "larger"; </ script > < p > 以上段落通過腳本修改。 </ p > </ body > </ html >

嘗試一下»

使用事件

HTML DOM 允許我們通過觸發事件來執行代碼。

比如以下事件:

  • 元素被點擊。
  • 頁面加載完成。
  • 輸入框被修改。
  • ……

在接下來的章節,你會學到更多關於事件的知識。

本例改變了id="id1" 的HTML 元素的樣式,當用戶點擊按鈕時:

實例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的標題1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
點我!</button>

</body>
</html>

嘗試一下»


更多實例

Visibility
如何使元素不可見。 您希望元素顯示或消失嗎?