JS控制css样式的几种方式
我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制)，这里总结一下js改变样式的几种方法：
1，通过style属性或者setAttribute()来更改样式
2，如果只是改变伪类(after,before)的content内容也可以这么做
3，通过更改类名来更改样式
4，那么重点来了：利用documentstyleSheets我们获取到所有样式表，然后选择一个样式表通过 insertRule 来添加样式；也可以创建新的cssRules，通过addRule()来添加样式
5，动态加载样式表
如果需要更改的样式比较多，还是建议通过动态加载样式的方式来改变页面样式
本文来自PHP中文网，原文地址： >
这样就可以完美的解决我们提取css的需求。但是官方不建议我们这样做。他们认为CSS就该打包到JS中减少请求数，看需求吧。
然后在 修改最初的module模块下面的rule里面的css规则变成
上面将css分离出来了。但是路径可能不太对
这个不是我们想要的。所以我们要用到publicPath来解决。
在处理前我们在webpackconfigjs上声明一个对象叫做 website
这里特别注意的就是 IP和端口 是你本机的IP和你配置的端口
然后在output选项中引用这个对象的publicPath属性
自己试试吧：
<!doctype html public "-//w3c//dtd html 40 transitional//en">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
body{
background-color:red;
}
divsel{
font-size:15px;
color:green;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
windowonload = function(){
var sheet =documentstyleSheets[0];
var rules = sheetcssRules || sheetrules;//
var rule = rules[0];
alert(ruleselectorText)
alert(rulestylecssText)
rule = rules[1];
alert(ruleselectorText)
alert(rulestylecssText)
}
//-->
</SCRIPT>
</head>
<body>
</body>
</html>
1、简易属性选择器
只顾其名不顾其值，这是简易属性选择器的特点。
h1[class] {color: silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以<h1 class="hoopla">Hello</h1>、<h1 class="severe">Serenity</h1>、<h1 class="fancy">Fooling</h1>的h1都会受到这条规则的影响。
2、精确属性值选择器
3、部分属性值选择器
如其名，只要属性值部分匹配（这里的部分，实际上要匹配整个单词）就会作用于该元素。让我们来看个例子：
<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass</p>p[class~="warning"] {font-weight: bold;}
和
p[class~="urgent"] {font-weight: bold;}
中任何一条都可以让这个p的字体变粗。
该选择器十分有用，比如你要样式化插图，其title中都含字符串”Figure”，如 title= "Figure 5：xxx说明"，则你可以使用img[title~="Figure"] 。
需要注重的是，如我第一句就强调的，你需要匹配的是整个单词，img[title~="Figure"] 不会匹配title= "Figure5：xxx说明"。
另外，我做了个小小的测试，你把例子中的“Figure”改成“插图”，把img[title~="Figure"] 改成img[title~="插图"] ，在Firefox中依然可以匹配，不管编码（encoding）是GB2312还是UTF-8。看来CSS对中文的支持还不赖。
4、非凡属性选择器
有点怪，这个选择器。它是这样工作的，嗯，举个例子比描述更轻易。
[lang|="en"] {color: white;}，这条规则（rule）将会选择属性lang的值en或者en-打头的元素。就是说，它可以匹配<h1 lang="en">Hello!</h1>、<p lang="en-us">Greetings!</p>和<div lang="en-au">G'day!</div>而不匹配<p lang="fr">Bonjour!</p>和<h3 lang="cy-en">Jrooana!</h3>。
以上就是关于聊聊JS控制css样式的几种方法全部的内容，包括:聊聊JS控制css样式的几种方法、如何获取浏览博客网页中的css样式、(九)css分离与图片路径处理等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）