原生JS设置CSS样式有多少方式

原生JS设置CSS样式有多少方式element.style和element.style.cssText有什么区别原生JS调整样式方式有3种。element.style使用驼峰形式!important权重无效document.getElementById(“box”).backgroundColor=”red”//!important无作用,下面两句是等效的document.getElementById(“box”).style.color=”red!important”document


原生 JS 调整样式方式有 3 种。

element.style

  • 属性需要使用驼峰形式
  • !important 权重无效
document.getElementById("box").backgroundColor = "red"

// !important 无作用,下面两句是等效的
document.getElementById("box").style.color = "red !important"
document.getElementById("box").style.color = "red"

【注意】这里使用 !important 权重是无效的

element.style.cssText

cssText 即所有的样式文本

  • 可以一次修改多个样式属性
  • 注意直接赋值会替换原来的 cssText
  • 可以添加 !important
// 原来的样式会丢失
document.getElementById("box").style.cssText = "color: red;font-size: 14px;"

// 在原来样式的基础上添加新的样式
document.getElementById("box").style.cssText += "background-color: green;"

有什么区别

  • cssText 适合用于批量修改,使页面只进行一次页面重绘
  • 在使用 !important 权重的时候,只能使用 cssTextstyle 不能生效

element.setAttribute()
setAttribute() 方法可以设置元素的属性,当然也可以设置 style 属性。

document.getElementById("box").setAttribute("style","color:red;")

// 配合 getAttribute(), 在原来样式基础上添加
document.getElementById("box").setAttribute("style", document.getElementById("box").getAttribute("style") + "color:red;")

今天的文章原生JS设置CSS样式有多少方式分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/5387.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注