JS設置CSS樣式的幾種方式
1. 直接設置style的屬性 某些情況用這個設置 !important值無效
如果屬性有'-'號，就寫成駝峰的形式（如textAlign） 如果想保留 - 號，就中括號的形式 element.style['text-align'] = '100px';
element.style.height = '100px';
2. 直接設置屬性（只能用於某些屬性，相關樣式會自動識別）
element.setAttribute('height', 100);
element.setAttribute('height', '100px');
3. 設置style的屬性
element.setAttribute('style', 'height: 100px !important');
4. 使用setProperty 如果要設置!important，推薦用這種方法設置第三個參數
element.style.setProperty('height', '300px', 'important');
5. 改變class 比如JQ的更改class相關方法
因JS獲取不到css的偽元素，所以可以通過改變偽元素父級的class來動態更改偽元素的樣式
element.className = 'blue'; element.className += 'blue fb';
6. 設置cssText
element.style.cssText = 'height: 100px !important'; element.style.cssText += 'height: 100px !important';
7. 創建引入新的css樣式文件
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.box {height: 100px !important;}');
1、添加style樣式
A、當代碼中沒有style元素時，可以通過document.createElement("style");建立style，然后插入到doucment.head,最后就可以成功在js中添加style了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box1"> </div> <script> var styleNode = document.createElement("style"); styleNode.innerHTML=".box1{width:100px;height:100px;background:red}"; document.head.appendChild(styleNode); </script> </body> </html>
以下是效果：
B、當代碼中已經存在style元素時
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ height: 200px; } </style> </head> <body> <div class="box1"> </div> <script> var styleNode = document.createElement("style"); styleNode.innerHTML=".box1{width:100px;background:red}"; document.head.appendChild(styleNode); </script> </body> </html>
按原來的方法也是可以新加style，但是這樣會不太好，因為一個html文檔一般只存在一個style元素，createElement會新建一個style元素，
效果如下：
建議采用如下方式添加樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ height: 200px; } </style> </head> <body> <div class="box1"> </div> <script> var styleNode = document.querySelector("style"); styleNode.innerHTML+=".box1{width:100px;background:red}"; // document.head.appendChild(styleNode); </script> </body> </html>
結果如下：
2、修改style樣式
如果不需要新增樣式，僅僅是修改已有的屬性，那么可以采用以下的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ height: 200px; width: 200px; background-color: red; } </style> </head> <body> <div class="box1"> </div> <script> var box1=document.querySelector(".box1"); box1.style.height="300px"; </script> </body> </html>
上述代碼只是在原有的基礎進行修改，不新增樣式，這也是平時絕大多數使用的方式
3、添加元素class類名
有時候我們可以通過js添加或移除元素類名進而控制元素的樣式變化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ height: 200px; width: 200px; background-color: red; } .active{ height: 300px; width: 300px; } </style> </head> <body> <div class="box1"> </div> <script> var istrue=false; var box1=document.querySelector(".box1"); box1.addEventListener('click',function(){ istrue=!istrue; if(istrue){ console.log(istrue); box1.classList.add("active"); } else{ console.log(istrue); box1.classList.remove("active"); } }) </script> </body> </html>
點擊box就可以實現樣式變化
利用這個可以實現很多交換動畫