操作樣式 · JavaScript

## 樣式操作有兩種方式可以操作樣式: 1. 使用類樣式. 2. 使用style,這種方式是行內. ## 類樣式 ``` <style> .show{ height: 200px;; width: 200px; background-color: pink; } </style> </head> <body> <div id="box" age=10></div> <input type="button" value="顯示" id="btn" > <script> function $(id) { return document.getElementById(id); } $('btn').onclick = function () { $('box').className = 'show'; } </script> ``` ## style方式 ``` <body> <div id="box" age=10></div> <input type="button" value="顯示" id="btn" > <script> function $(id) { return document.getElementById(id); } $('btn').onclick = function () { $('box').style.width = '200px'; $('box').style.height = '200px'; //要帶單位 $('box').style.backgroundColor = 'red'; } </script> ``` ## 操作樣式是使用類樣式還是style 哪個方便用哪個. 使用樣式比較多的時候使用className,比較少的情況用style. ## 背景顏色開關燈 ``` function $(id) { return document.getElementById(id); } var flag = true; $('btn').onclick = function () { if (flag) { document.body.style.backgroundColor = 'black' this.value = '開燈'; flag = false; } else { document.body.style.backgroundColor = 'pink' this.value = '關燈'; flag = true; } } ``` ## 顯示隱藏二維碼 ``` ```