js如何添加css3样式

js如何添加css3样式

这里只介绍比较好用的方法,使用起来比较麻烦的方式不再介绍。

1、直接在元素style上添加属性

element.style.boxShadow = "0 4px 4px red";

2、更改cssText的值

element.style.cssText = "box-shadow: 0 4px 4px red";

3、调用setProperty方法添加css(相关课程推荐:JS视频教程

element.style.setProperty("box-shadow", "0 4px 4px red", "important");

4、给元素添加style属性

//虽然看起来是直接给style赋值,实际上并不会覆盖其它样式
element.setAttribute("style", "box-shadow: 0 4px 4px red");

5、通过插入style节点来添加新样式

//Rule规则实际上是绑定在Element对象上的,观察控制台style样式并不会看到任何变化
//将style节点插入到html标签的最下面,这样可以保证优先级最高
let styleElement = document.createElement("style");
document.body.parentElement.appendChild(styleElement);
styleElement.sheet.addRule("div", "box-shadow: 0 4px 4px red");

6、直接给document.styleSheets添加样式

//所有的样式,最终都会存储到document.styleSheets中
//所以也可以直接给document.styleSheets添加样式
//给最后一个sheet对象添加样式,从而保证优先级最高
let sheets = document.styleSheets;
let sheet = sheets[sheets.length - 1];
sheet.addRule("div", "box-shadow: 0 4px 4px red");

更多JavaScript相关技术文章,请访问JavaScript答疑栏目进行学习!

以上就是js如何添加css3样式的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读