利用JS修改style属性和添加元素类名（important)
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就可以实现样式变化
利用这个可以实现很多交换动画
