在开发网页时, 有时不想通过 CSS 源文件来添加网页元素的 CSS 样式代码, 这时, 我们可以通过 JS 来添加这些元素的 CSS 样式. 那么怎样通过 JS 来为网页元素添加 CSS 样式呢?
下面举一个简单案例:<div id="box"></div> 我们要为这个 id 为 box 的 div 添加样式. 我们要为它添加宽度, 高度, 背景色.
方法一:
- var head= document.getElementById("box"); // 获取到 id 为 box 的 div 标签元素.
- head.style.width = "70px"; // 设置宽度为 70
- head.style.height = "70px";// 设置高度为 70
- head.style.display = "#ccc";// 设置背景色为灰色
这种方法比较简单, 但是, 如果 CSS 样式很多的话, 如还有 margin,padding,font-size 等, 这时, 我们还这样写的话, 那会一大堆. 这时, 我们可以用方法二.
方法二:
- var head= document.getElementById("box");// 获取到 id 为 box 的 div 标签元素.
- head.style.cssText="width:70px;height:70px;display:#ccc";
这种方法中, 我们用到了 "cssText", 这样我们就大大地减少了代码. 就像写 CSS 源文件里一样.
方法三: 使用 setProperty
element.style.setProperty('height', '300px', 'important');
如果要设置! important, 推荐用这种方法设置第三个参数
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/javascript/16978.html