提綱：我們可以通過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; width: 300px; height:270px; /*background: red;*/ animation: mymove 1s linear; } div:before { content: ""; position: absolute; left: 150px; width: 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; width: 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希望大家支持