jacascript CSS样式的脚本化(js)操作
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
引入CSS有3种方式：行间样式，内联样式和外部链接样式。
在实际工作中，我们使用 javascript 操作CSS样式时:
- 在改变元素的单个样式时，一般会直接操作，改变其行间样式；如：obj.style.color=...
- 同时改变元素的较多样式时，可以使用 cssText，改变其行间样式；obj.style.cssText=...
- 更常用的是使用 css 类，将更改前和更改后的样式提前设置为类 。只要更改其类名 className 即可，obj.className；
- 如果要改变多个类名，使用 classList 更为方便，IE9及以下浏览器不支持；
行间样式
行间样式又叫内联样式，element 元素节点提供 style 属性，用来操作 CSS 行间样式；
如果一个 CSS 属性名包含一个或多个连字符，属性名的格式应该是移除连字符，将每个连字符后面紧接着的字母大写（驼峰命名法）；
<div class="wrapper" style="width: 500px;height: 200px;border-bottom: 10px solid #ff0;"></div> <script type="text/javascript"> var oWrapper = document.getElementsByClassName('wrapper')[0]; console.log(oWrapper.style.borderBottom);//10px solid rgb(255, 255, 0) </script>
其实，如果操作行间样式，可以使用元素节点的属性操作方法 hasAttribute()、getAttribute()、setAttribute()、removeAttribute() 等，来操作style属性；
<div class="wrapper" style="width: 500px;height: 200px;border-bottom: 10px solid #ff0;"></div> <script type="text/javascript"> var oWrapper = document.getElementsByClassName('wrapper')[0]; oWrapper.setAttribute('style','background-color: #0ff;') //setAttribute 设置的是当前属性的整体 console.log(oWrapper.hasAttribute('style'));//true console.log(oWrapper.getAttribute('style'));//background-color: #0ff; </script>
cssText
通过 cssText 属性能够访问到 style 属性中的CSS代码（行间样式）；
在读模式下，cssText 返回浏览器对 style 属性中的CSS代码的内部表示；IE8及以下浏览器返回的属性名是全大写的
在写模式中，赋给 cssText 的值会重写整个 style 属性的值；
<div class="wrapper" style="width: 500px;height: 200px;border-bottom: 10px solid #ff0;"></div> <script type="text/javascript"> var oWrapper = document.getElementsByClassName('wrapper')[0]; console.log(oWrapper.style.cssText); //width: 500px; height: 200px; border-bottom: 10px solid rgb(255, 255, 0); oWrapper.style.cssText = 'background-color: #0ff;'; console.log(oWrapper.style.cssText);//background-color: rgb(0, 255, 255); </script>
length
length 属性返回内联样式中的样式个数；IE8及以下浏览器不支持；
<div class="wrapper" style="width: 500px;height: 200px;border-bottom: 10px solid #ff0;"></div> <script type="text/javascript"> var oWrapper = document.getElementsByClassName('wrapper')[0]; console.log(oWrapper.style.length);//5 //width height border-bottom-width border-bottom-style border-bottom-color </script>
方法
getPropertyPriority(propertyName) 如果给定的属性使用了!important设置，则返回"important"；否则返回空字符串；IE8及以下浏览器不支持
setProperty(propertyName,value,priority) 方法将给定属性设置为相应的值，并加上优先级标志("important"或一个空字符串)，该方法无返回值；IE8及以下浏览器不支持
removeProperty(propertyName) 方法从样式中删除给定属性，并返回被删除属性的属性值；IE8及以下浏览器不支持
<div id="test" style="height: 40px!important;width: 40px;background-color: pink;border:10px solid #f0f"></div> <script> var oTest = document.getElementById('test'); //getPropertyPriority() 如果给定的属性使用了!important设置，则返回"important"；否则返回空字符串 console.log(oTest.style.getPropertyPriority('height'));//'important' console.log(oTest.style.getPropertyPriority('width'));//'' //setProperty(propertyName,value,priority)方法将给定属性设置为相应的值，并加上优先级标志("important"或一个空字符串) oTest.style.setProperty('width','100px'); console.log(oTest.style.width);//100px console.log(oTest.style.getPropertyPriority('width'));//'' oTest.style.setProperty('background-color','blue','important'); console.log(oTest.style.backgroundColor);//blue console.log(oTest.style.getPropertyPriority('background-color'));//important //removeProperty()方法从样式中删除给定属性，并返回被删除属性的属性值 console.log(oTest.style.border);//10px solid rgb(255, 0, 255) oTest.style.removeProperty('border'); console.log(oTest.style.border);//'' </script>
计算样式
元素的渲染结果是多个CSS样式博弈后的最终结果，这也是CSS中的C(cascade)层叠的含义。cssText 只能获取行间样式，这通常来说，并不是我们想要的结果，我们有时候需要的是元素的计算样式（无论行内、内联或链接）；
元素的计算样式(computedStyle)是一组在显示元素时实际使用的属性值，也是用一个 CSSStyleDeclaration 对象来表示的，但实际样式是只读的，主要通过getComputedStyle() 方法实现；IE8及以下浏览器不支持
getComputedStyle() 方法接收两个参数：要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象，其中包含当前元素的所有计算的样式；
第二个参数代表伪元素字符串，包括":before"、":after"、":first-line"等，如果设置为null或省略不写，则返回自身元素的 CSSStyleDeclaration 对象；
对于font、background、border等复合样式，各浏览器处理不一样。chrome 会返回整个复合样式，而IE9+、firefox和safari则输出空字符串''；
在计算样式中，类似百分比等相对单位会转换为绝对值；
<style type="text/css"> #test{ background-color: #ff0; } #test:before{ content: ""; width: 50px; display: block; } </style> <div id="test" style="width: 100px;height: 200px;"></div> <script type="text/javascript"> var oTest = document.getElementById('test'); console.log(getComputedStyle(oTest).width);//100px console.log(getComputedStyle(oTest).height);//200px console.log(getComputedStyle(oTest).backgroundColor);//rgb(255, 255, 0) console.log(getComputedStyle(oTest,':before').width);//50px </script>
IE8及以下浏览器不支持 getComputedStyle() 方法，但在 IE 中每个具有 style 属性的元素有一个 currentStyle 属性，这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式；
obj.currentStyle[style] 属性中的计算样式并不会输出集合样式，对颜色、百分比设置不会进行相应转换，而是原样输出；
<style type="text/css"> #test{ background-color: #ff0; } </style> <div id="test" style="width: 30%;height: 200px;"></div> <script type="text/javascript"> var oTest = document.getElementById('test'); //标准浏览器会报错，IE正常显示 console.log(oTest.currentStyle.backgroundColor);//#ff0 console.log(oTest.currentStyle.width);//30% console.log(oTest.currentStyle.height);//200px </script>
兼容性写法
<style type="text/css"> #test{ background-color: #ff0; } </style><div id="test" style="width: 30%;height: 200px;"></div> <script type="text/javascript"> function getCSS(obj,attribute){ return window.getComputedStyle ? getComputedStyle(obj)[attribute] : obj.currentStyle[attribute]; } var oTest = document.getElementById('test'); console.log(getCSS(oTest,'width'));//计算出来的绝对值 console.log(getCSS(oTest,'height'));//200px </script>
动态样式
动态样式包括两种情况：一种是通过<link>元素插入外部样式表，另一种是通过<style>元素插入内部样式。
<script type="text/javascript"> //动态加载外部样式 function loadLinkCSS(urlData){ loadLinkCSS.mark = 'load';//标记是否执行过此程序 var linkCSS = document.createElement("link"); linkCSS.rel = "stylesheet"; linkCSS.type = "text/css"; linkCSS.href = urlData;//路径设置 var oHead = document.getElementsByTagName('head')[0]; oHead.appendChild(linkCSS); } //动态加载内部样式 //该方法在IE8及以下浏览器中报错，因为IE8及以下浏览器将<style>视为当作特殊的节点，不允许访问其子节点或设置 innerHTML 属性 function loadStyleCSS(str){ loadStyleCSS.mark = 'load';//标记是否执行过此程序 var styleCSS = document.createElement("style"); styleCSS.type = "text/css"; styleCSS.innerHTML = str; var head = document.getElementsByTagName('head')[0]; head.appendChild(styleCSS); } </script>
动态插入内部样式时，存在兼容问题，有两种兼容处理办法：
- IE浏览器支持访问并修改元素的 CSSStyleSheet 对象的 cssText 属性，通过修改该属性可实现类似效果；
- 作用域元素是微软自己的一个定义。在IE8及以下浏览器中，<style>元素是一个没有作用域的元素，如果通过 innerHTML 插入的字符串开头就是一个无作用域的元素，那么IE8及以下浏览器会在解析这个字符串前先删除该元素；
<script type="text/javascript"> //动态加载内部样式的兼容性写法一 //IE浏览器支持访问并修改元素的 CSSStyleSheet 对象的 cssText 属性，通过修改该属性可实现类似效果 function loadStyleCssCompatA(str){ loadStyleCssCompatA.mark = 'load';//标记是否执行过此程序 var styleCSS = document.createElement("style"); styleCSS.type = "text/css"; try{ styleCSS.innerHTML = str; }catch(ex){ styleCSS.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(styleCSS); } //动态加载内部样式的兼容性写法二 //在IE8及以下浏览器中，style元素是一个没有作用域的元素， //如果通过 innerHTML 插入的字符串开头就是一个无作用域的元素，那么IE8及以下浏览器会在解析这个字符串前先删除该元素 function loadStyleCssCompatB(str){ loadStyleCssCompatB.mark = 'load'; var styleCSS = document.createElement("div"); styleCSS.innerHTML = '_' + '<style>' + str+'</style>'; styleCSS.removeChild(div.firstChild); var oHead = document.getElementsByTagName('head')[0]; oHead.appendChild(styleCSS.firstChild); styleCSS = null; } </script>
CSS模块侦测
CSS的规则发展太快，新的模块层出不穷。不同浏览器的不同版本，对CSS模块的支持情况都不一样。有时候，需要知道当前浏览器是否支持某个模块，这就叫做"CSS模块的侦测"；
一个比较普遍适用的方法是，判断某个DOM元素的 style 对象的某个属性值是否为字符串。如果该CSS属性确实存在，会返回一个字符串。即使该属性实际上并未设置，也会返回一个空字符串。如果该属性不存在，则会返回 undefined
CSS.supports() 方法返回一个布尔值，表示是否支持某条CSS规则；safari 和 IE浏览器不支持
<div id="test"></div>
<script>
var oTest = document.getElementById('test');
//CSS模块的侦测
//IE9及以下浏览器和safari返回undefined，其他浏览器都返回''，
//所以IE9及以下浏览器和safari不支持animation
console.log(oTest.style.animation);
//IE和firefox浏览器返回undefined，chrome和safari浏览器都返回''，
//所以IE和firefox浏览器不支持WebkitAnimation
console.log(oTest.style.WebkitAnimation);
//safari和IE浏览器不支持,
//chrome返回true
console.log(CSS.supports('transition','1s'));//true
</script>
