javascript中控制css样式的方法_js控制css样式-CSDN博客

本文链接：https://blog.csdn.net/qq_68805187/article/details/130592102

文章介绍了通过JavaScript操作DOM元素样式的方法，包括直接修改对象的style属性，使用className属性添加或更改样式类，以及利用classList接口的add、remove和toggle方法动态管理CSS类。另外，还提到了如何通过插入CSS规则创建新的样式类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：对象源.style.属性


let div = document.querySelector('div')

div.style.width = '300px'
div.style.height = '300px'
div.style.backgroundColor = 'red'

注意：在css中背景颜色是这样写的 ‘background-color’ ,是一条下划线，但在js里面，这种线，都是用驼峰规则来解决，所以就把color的首字母c大写了

这种方法通常用于添加或者修改单个属性

方法2：对象源.className


let div = document.querySelector('div')

div.className = 'right'

其实这样来说，通过document.querySelector来找到对象，然后这个对象上面有很多属性，像上面提到的style其实也是这个对象的一部分，而这个对象有一个属性，叫calss，就是在html里面写标签的时候给样式的class, 但js这边要用className

我们通过给className属性来赋值，就可以实现改变这个对象的样式了，假如我们现在还要添加一个blk的css样式集


let div = document.querySelector('div')

div.className = "right blk"

这样也可以实现多个样式的改变，唯一美中不足的是，你要在style标签里面，定义一个样式集

方法3.1：对象源.classList.add("样式集的名字")


let div = document.querySelector('div')

div.classList.add("blk")

方法3.2：对象源.classList.remove("样式集的名字")

let div = document.querySelector('div')

div.classList.remove("blk")

方法3.3：对象源.classList.toggle("样式集的名字")

let div = document.querySelector('div')

div.classList.toggle("blk")

这个toggle是有则删之，无则加之

4.通过classList属性和CSS样式表

可以使用classList属性和CSS样式表来创建和添加新的CSS类。以下是一个示例：

var sheet = document.styleSheets[0];
var rule = ".newClass {color: red;}";
sheet.insertRule(rule, sheet.cssRules.length);

这个示例在第一个CSS样式表上创建一个名为“newClass”的新规则，并将其添加到末尾。这将使添加到页面的元素可以访问该类，然后使用classList属性来将该类应用于特定的元素。