本文介绍了如何使用JavaScript动态操作CSS，包括读取和设置元素样式，使用classList属性切换类名，利用getComputedStyle获取计算样式，以及创建和修改CSS样式表。JavaScript还能实现动画效果，通过定时器改变样式，尽管现代CSS3提供了更简便的动画方法。此外，文中还展示了如何添加和移除CSS规则，以及创建新的CSS链接和style标签。
脚本化CSS可以理解为使用javascript操作CSS。
CSS指定HTML元素在浏览器显示的样式,规定了元素的外观。它允许开发者指定元素的字体，颜色，边距，缩进，边框，定位等。脚本化CSS使得CSS和JavaSccript结合在一起，可以更加丰富网页视觉效果。
CSS相关
html文档视觉效果包括字体，颜色，间距等。CSS指定许多样式作为属性名来控制元素的字体颜色，下划线，边距等样式，属性名后跟冒号和属性值。属性值指定了CSS样式要展现什么效果。
eg:
font-size: 20px;多个属性之间以分号分隔。
读写CSS
读取CSS的语法为element.style.pro。操作某元素时先获取某元素，然后通过该元素的style属性访问style属性中的某些样式。这个style属性的值是一个对象，具有众多属性和方法。这个读写css的方法只是针对html元素标签内的style属性，也就是行内样式。对于link标签引入的外部样式表，写在style标签的样式，不能使用这个方式读取到。eg:
<div id="box"></div>
<script>
var div=document.getElementById("box");
div.style.width=div.style.height="100px";
div.style.backgroundColor="red";
</script>注意：
- 设置的CSS样式如果不符合格式的话，不会报错，而是会默认失败。(如果对代码内容不确定的话建议在设置样式后打开控制台检查以下是否成功设置)
- 属性名为组合单词时必须变成小驼峰命名法。background-color在js代码中就是backgroundColor。
- js操作CSS中的float时使用cssFloat。原因在于float为javascript的保留字。更多
- 为属性赋值时取值必须使用字符串。部分有单位的取值还需要加上px，rem等
脚本化CSS可以实现在特定时间改变样式，通过定时器等工具可以实现动画效果，但是现在由于已经在CSS3中有了动画，许多动画效果可以使用css3实现而不是js代码。
具体属性方法讲解
window.getComputedStyle()方法，第一个参数是元素对象，第二个参数是是否指定伪元素，伪类选择器，不是指定为null或空字符串。方法返回一个元素的计算样式对象，对象的属性值只读，不可修改。对象的属性值是绝对值，相对单位会被转化。复合属性会被更改为简单属性再加以显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
div{
width: 100px;
height:100px;
background-color: #0f0;
}
#box::after{
content: "";
display: block;
width:300px;
height:300px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div=document.getElementsByTagName("div")[0];
console.log(window.getComputedStyle(div,"::after"));
</script>
</body>
</html>element.classList属性：该属性返回一个DOMTokenList对象。这个对象是一个类数组，具有length等属性。具有add()方法，将参数字符串作为类名添加到元素。remove()方法，删除一个类名。toggle()方法，参数字符串如果不是元素类名，就加上，是的话就删除元素的这个类名。contanis()方法，对参数字符串进行检测，如果元素是类名，返回真，反之返回假。
<body>
<div id="box" class="ab cd ef"></div>
<script>
var div=document.getElementsByTagName("div")[0];
console.log(div.classList)//输出数组DOMTokenList
div.classList.add("gh");//加上了gh类名
div.classList.remove("ab");//删除了ab类名
div.classList.toggle("cd")//删除了cd类名
//最终剩下ef，gh两个类名
</script>
</body>css样式表可以设置disabled来控制样式表是否生效。控制disabled属性来控制样式也是一个思路。
var css=document.getElementsByTagName("link")[0];
css.disabled="ture";//成功禁用link引入的css样式表
var css2=document.getElementsByTagName("style")[0];
css2.disabled="ture";//成功禁用style标签的css样式表javascript可以通过document.styleSheet[]访问网页引入的某个样式表。在某个样式表中又可以通过cssRules[]访问某一条样式规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<link rel="stylesheet" href="">
<style>
/*这里是第一个样式表 对应document.styleSheet[0]*/
div{/*这里是第一个样式规则，对应document.styleSheet[0].cssRules[0]*/
width: 100px;
height:100px;
background-color: #0f0;
}
#box::after{
/*这里是第一个样式表的第二个样式规则，对应document.styleSheet[0].cssRules[1]*/
content: "";
display: block;
width:300px;
height:300px;
background-color: #ccc;
}
</style>
<style>
/*这里是第二个样式表，对应document.styleSheet[1]*/
span{/*这里是第一个样式规则，对应document.styleSheet[1].cssRules[0]*/
display: block;
width:100px;
height:100px;
background-color: #00f;
}
</style>
</head>
<body>
<div id="box"></div>
<span></span>
<script>
var css1=document.styleSheets[0];
var css2=document.styleSheets[1];
console.log(css1,css2);
</script>
</body>
</html>element.style.cssText属性，直接设置元素的css样式。注意+=与=的区别，+=是在原来的基础上增加样式，=是直接覆盖原有的样式。取值不论+=还是=都是字符串，字符串的内容是css样式。
<body>
<div id="box"></div>
<script>
var div=document.getElementById("box");
div.style.border="10px solid black";
//cssText+=时不会覆盖之前的css样式
div.style.cssText+="width:100px; height:100px; background-color:red";
//cssText=时会覆盖之前的css样式
// div.style.cssText="width:100px;height:100px;background-color:red";
//具体可以自行尝试，前者无边框，后者有边框
</script>
</body>element.className属性，修改类名来改变css样式，需要预先设置好相应类名对应的样式，直接修改类名就可以达到更换大量样式的目的，适用于元素样式逐一设置较为繁琐的情况。
<head>
<style>
.box{
width:100px;
height:100px;
border-radius: 50%;
background-color: #ccc;
}
.wrapper{
width:300px;
height:300px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var div=document.getElementById("box");
// div.className="box";//变为灰色圆
// div.className="wrapper";//变为绿色正方形
</script>
</body>使用js代码创建link引入css或者创建style标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<div id="box"></div>
<script>
var css=document.createElement("style");
css.innerHTML="div{width:100px;height:100px;background-color:lightblue;}"
document.head.appendChild(css);
</script>
</body>
</html> var link=document.createElement("link");
link.rel="stylesheet";
link.href="css路径";
document.head.appendChild(link);removeProperty()方法，移除指定的css样式。对于背景颜色这样的属性不同单词间以-分隔。指定移除css样式，对于class,title这样的属性无效。
<body>
<div id="box" title="box11" style="width:100px;height:100px;background-color:#0f0"></div>
<script>
var div=document.getElementById("box");
div.style.removeProperty("background-color");
</script>
</body>| window.getComputedStyle() | 参数分别是元素对象，是否是伪元素，伪类选择器。返回元素的计算样式对象。 |
| element.classList | 该属性返回元素类名的类数组，具有add,remove等方法 |
| element.hasAttribute() | 是否含有某一属性，含有返回true，反之返回false |
| element.setAttribute() | 设置元素属性，可以一次性设置多个css样式，设置的样式会覆盖其他行内样式. |
| element.style.getPropertyValue() | 参数为属性名，但不要求小驼峰命名，和css中的一致 |
| element.style.setProperty() | 三个参数按照顺序分别是属性名，属性值，是否使用!important优先级,传入蚕食分别是属性名字符串，属性值字符串，important字符串或空字符串 |
| element.style.removeProperty() | 移除参数字符串指定的css样式 |
| element.style.cssText | 直接设置元素的css样式文本，+=是增加样式，=是覆盖掉原先的样式。取值为css样式字符串。 |
这样的方法还有很多，但是实际操作css样式时我们并不需要全部运用，只需要使用其中的部分属性方法就可以达到操作css的效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
