js动态修改css样式（如何实现JS动态修改css全局样式）

：暂无数据 2026-08-27 17:40:06 ：2

“js动态修改css样式”相关信息最新大全有哪些，这是大家都非常关心的，接下来就一起看看js动态修改css样式（如何实现JS动态修改css全局样式）！

本文目录

如何实现JS动态修改css全局样式
js如何更改css样式，
JS修改CSS设置的样式
JS 动态修改CSS 样式方法/全局
js如何修改样式
js修改样式css有哪些方法呢

如何实现JS动态修改css全局样式

用css样式相关的接口 stylesheet.insertRule或者stylesheet.addRule 这两个都可以动态插入css样式兼容性还可以 ie9+
比如
myStyle.insertRule("#blanc { color: white }", 0);
需要删除的时候还有deleteRule和removeRule两个方法

js如何更改css样式，

JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。

案例

以下小案例使用JQuery作为演示。

前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：

***隐藏网址***

html部分代码

《p》
我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。
《/p》
《button》
点击我，给上面段落添加黄色背景颜色。
《/button》

JQuery代码

$("button").click(function(){
$("p").css("background-color", "yellow");
});

修改多个属性

$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});

结论与解释：

首先使用Jquery选择器进行元素选择 - $("button")
为该元素绑定点击事件 - click
click中的匿名函数修改css属性。
在css属性的修改中，p段落有了黄色背景；多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。

注意事项：

可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。
修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。

JS修改CSS设置的样式

语法：元素.style.样式名=样式值

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如 background-color 。需要将这种样式名修改为驼峰命名法：去掉-，然后将-后的第一个字母大写，比如 backgroundColor

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
所以尽量不要为样式添加!important

语法：元素.style.样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

语法:元素.currentStyle.样式名
如果当前元素没有设置该样式，则获取它的默认值
例如： box1.currentStyle.width

这个方法是window的方法，可以直接使用需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象﹒样式名来读取样式

如果获取的 样式没有设置 ，则会获取到真实的值，而不是默认值
比如:没有设置width，它不会获取到auto，而是 一个长度

注意：通过currentStyle和getComputedstyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性

参数：
obj 要获取样式的元素
name 要获取的样式名

JS 动态修改CSS 样式方法/全局

如何配置自行百度

1.scss文件定义变量

2.js中更改$textColor 变量的值

都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
***隐藏网址***