前端筆記46——設定html元素樣式
阿新 • • 發佈：2019-01-01
前言
在前面的《前端筆記44——獲取或者修改div內容》和《前端筆記45——JavaScript獲取和設定input的值》中，我們說的都是改變內容了，這篇部落格我們來說一下設定html元素的樣式。
設定html元素的樣式
程式碼例項：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box" style="background-color: red; height: 100px;width: 100px;"></div> <button id="btn">點選換背景顏色</button> <script type="text/javascript"> // 需求：點選換div背景顏色 // 1找到btn 找到box 2點選事件 3改變顏色 var oBtn = document.getElementById("btn") var oBox = document.getElementById("box") oBtn.onclick = function(){ // 改變背景顏色 符號‘.’可以理解為漢語‘的’ // 在CSS樣式 background-color 在js中需要去掉中間的 - 把後面單詞的首字母大寫 oBox.style.backgroundColor = "orange" } </script> </body> </html>
上面程式碼中，我們通過標籤id.style.屬性的名稱設定值就是，改變html元素的樣式。