如何在JavaScript中更改页面CSS样式

最新推荐文章于 2024-06-01 00:30:00 发布

蓝言轩

最新推荐文章于 2024-06-01 00:30:00 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript css 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/lanyanxuan/article/details/122473396

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

在写前端的时候，有时候会碰到需要在JS中对CSS进行控制，而JS只提供了对HTML的控制器，并没有获取CSS标签的方法。我们可以通过HTML中的添加CSS的属性或标签来控制具体对象的样式。

1.通过标签中的`style=""`属性

dom元素.style='值'//“值”中填写想要的CSS样式

这种方法可以用JS精准地对某个对象根据特定的动作改变样式，但是这种方法只能对类进行修改，但是如果想要在JS中控制伪类或者伪元素，这时就可以用第二种方法：

2.在`<head></head>`标签中添加或修改`<style></style>`标签

//获取head标签
var headobj=document.getElementsByTagName('head')[0];
//创建style标签
var _style = document.createElement('style');
//写入样式
_style.innerText = ""
//将style标签加入head标签中
headobj.appendChild(_style);

以上是在JS中控制局部对象的方法，如果想控制页面全局样式的改变，可以通过改变<link></link>标签中的href=""属性更换整个CSS文件夹进行页面全局的更改。

蓝言轩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在JavaScript中更改页面CSS样式

在写前端的时候，有时候会碰到需要在JS中对CSS进行控制，而JS只提供了对HTML的控制器，并没有获取CSS标签的方法。我们可以通过HTML中的添加CSS的属性或标签来控制具体对象的样式。1.通过标签中的style=""属性dom元素.style='值'//“值”中填写想要的CSS样式这种方法可以用JS精准地对某个对象根据特定的动作改变样式，但是这种方法只能对类进行修改，但是如果想要在JS中控制伪类或者伪元素，这时就可以用第二种方法：2.在<head></head>标签中添
复制链接

扫一扫