提纲：我们可以通过js来修改元素的大小，颜色，位置等样式
1.element.style 行内样式的操作
2.element.className 可以获取元素的class名称
3.element.setAttribute("type","button"); 获取元素修改元素的行内样式
4.insertRule(rule,index) .document.styleSheets[0]用来获取外部样式表！ 使用myStyle.insertRule在外部样式表中插入styleCss规则
定义和用法insertRule() 方法在样式表中插入一条规则。返回值参数 index 的值。addRule() 方法向样式表插入一条规则，该方式是特定于 IE 的方法。
| 参数 | 描述 |
|---|---|
| rule |
必需。要添加到样式表的规则的完整的、可解析的文本表示。
|
| index | 必需。要把规则插入或附加到 cssRules 数组中的位置。 |
5. addRule(selector,style,index).document.styleSheets[0]用来获取外部样式表！使用addRule修改伪类外部cssStyle的样式
描述该方法在样式表的 rules 数组的指定 index 处插入（或附加）一条新的 CSS 样式规则。这是标准 insertRule() 方法的特定于 IE 的替代。
| 参数 | 描述 |
|---|---|
| selector | 必需。规则的 CSS 选择器。 |
| style |
必需。应用于匹配该选择器的元素的样式。 这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。 |
| index |
可选。规则数组中插入或附加规则的位置。 如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。 |
一.element.style 获取元素进行内样式的操作
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div id="a1"></div> <script type="text/javascript"> var a1 = document.getElementById("a1") a1.onclick = function(){ a1.style.backgroundColor = "blue"; } </script> </body> </html>
点击过后改变style的样式是因为style的内联权重比外联样式的权重高所以会改变
二.element.className类名样式操作可以获取到element中的class="类名"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body id="myid" class="mystyle"> <script> var x=document.getElementsByTagName('body')[0]; document.write("Body 元素 CSS 类为: " + x.className); document.write("<br>"); document.write("另一种方式: "); document.write(document.getElementById('myid').className); </script> </body> </html>
三四五.方法都写在下方同一个例子之中看一看实际中该如何运用！（微信红心点赞效果）
下面是代码：用css创建一个红心然后利用dom添加样式！
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> div{ position:relative; margin:200px auto; 300px; height:270px; /*background: red;*/ animation: mymove 1s linear; } div:before { content: ""; position: absolute; left: 150px; 150px; height: 240px; background: blue; border-radius: 150px 150px 15px 15px; transform-origin: 0 100%; transform: rotate(-45deg); } div:after{ content: ""; position: absolute; left: 0px; 150px; height: 240px; background: blue; border-radius: 150px 150px 15px 15px; transform-origin: 100% 100%; transform: rotate(45deg); } </style> </head> <body> <div id="a1" class="a"></div> <script type="text/javascript"> // 获取到外部css中的样式需要后面添加[数组]用来准确的获取哪一个外部样式 var a1 = document.styleSheets[0]; var id = document.getElementById("a1") document.onclick = function(){ // 这个方法用于给element添加行内样式(内嵌样式) id.setAttribute("style","border:10px solid pink;"); // 这个方法用于操纵外部样式表中的选择器 并且也可以改变外部样式表伪类选择器里面的值,注意！外部样式权重比例要低于内联样式 a1.addRule('div::before','background: green; color:red; '); a1.addRule('div::after','background: green; color:red; '); // insertRule方法可以在外部样式表中添加一条Css规则 a1.insertRule("@keyframes mymove{0%{transform: scale(1);}50%{transform: scale(1.2);opacity: 0.8;}100%{transform: scale(1);}}",3); } </script> </body> </html>
这个是点击之后的效果并带有动画！
为了方便将例子都写在一起了QAQ希望大家支持