操作样式 · 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; } } ``` ## 显示隐藏二维码 ``` ```