Dom修改元素样式

提纲：我们可以通过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	必需。要添加到样式表的规则的完整的、可解析的文本表示。 对于规则集（rule sets），rule 指示选择器和样式声明。 对于 @ 规则（At rules），rule 指示 @ 标识符和规则内容。
index	必需。要把规则插入或附加到 cssRules 数组中的位置。

 

5. addRule(selector,style,index).document.styleSheets[0]用来获取外部样式表！使用addRule修改伪类外部cssStyle的样式

描述该方法在样式表的 rules 数组的指定 index 处插入（或附加）一条新的 CSS 样式规则。这是标准 insertRule() 方法的特定于 IE 的替代。

参数	描述
selector	必需。规则的 CSS 选择器。
style	必需。应用于匹配该选择器的元素的样式。 这个样式字符串是一个分号隔开的属性：值对的列表。并没有使用花括号开始或结束。
index	可选。规则数组中插入或附加规则的位置。 如果这个可选参数被省略掉，则新的规则会增加到规则数组的最后。

 

一.element.style 获取元素进行内样式的操作

 

 

 

点击过后改变style的样式是因为style的内联权重比外联样式的权重高所以会改变

 

 

 

 

 

 

二.element.className类名样式操作可以获取到element中的class="类名"

"utf-8">

"myid" class="mystyle">

 

 

 三四五.方法都写在下方同一个例子之中看一看实际中该如何运用！（微信红心点赞效果）

下面是代码：用css创建一个红心然后利用dom添加样式！

"zh">

    "UTF-8" />
    "viewport" content="width=device-width, initial-scale=1.0" />
    "X-UA-Compatible" content="ie=edge" />
    
    



    
"a1" class="a">
    
    

 

 

 

 

 

这个是点击之后的效果并带有动画！

为了方便将例子都写在一起了QAQ希望大家支持