脚本化 CSS,通俗点说,就是使用 javascript 来操作。有 3 种方式:外部样式,内部样式和行间样式。本文将主要介绍脚本化行间样式
又叫内联样式,使用的 style 属性进行设置
- <div style="height: 40px;width: 40px;background-color: blue;">
- </div>
提供 style 属性,用来操作 CSS 行间样式,style 属性指向 cssStyleDeclaration 对象
[注意]IE7 - 浏览器不支持 cssStyleDeclaration 对象
- <div id="test" style="height: 40px;width: 40px;background-color: blue;">
- </div>
- <script>
- //IE7-浏览器返回报错,其他浏览器返回true
- console.log(test.style instanceof CSSStyleDeclaration);
- </script>
style 属性用来读写页面元素的行内 CSS 样式
如果读取没有设置过的行间样式将返回空字符串''
如果设置的行间样式不符合预定格式,并不会报错,而是静默失败
[注意]IE8 - 浏览器支持给属性设置值时不带单位
- <div id="test" style="height: 40px;width: 40px;background-color: blue;">
- </div>
- <script>
- console.log(test.style.height); //'40px'
- test.style.height = '30px';
- console.log(test.style.height); //'30px'
- test.style.height = '20';
- //IE8-浏览器返回'20px',因为IE8-浏览器支持给属性设置值时不带单位;而其他浏览器仍然返回'30px'
- console.log(test.style.height);
- console.log(test.style.position); //''
- </script>
如果一个 CSS 属性名包含一个或多个连字符,CSSStyleDeclaration 属性名的格式应该是移除连字符,将每个连字符后面紧接着的字母大写
- <div id="test" style="height: 40px;width: 40px;background-color: blue;">
- </div>
- <script>
- console.log(test.style.backgroundColor); //'blue'
- </script>
float
理论上,有一个不能直接转换的 CSS 属性是。因为,float 是 JavaScript 中的,不能用作属性名
但实际上,经过测试,直接使用 float 在各个浏览器中都有效
- <div id="test" style="float:left">
- </div>
- <script>
- console.log(test.style.float); //'left'
- </script>
作为推荐,要访问 float 属性,应该使用 cssFloat
[注意]IE8 - 浏览器不支持 cssFloat,但 IE 浏览器支持 styleFloat
- <div id="test" style="float:left">
- </div>
- <script>
- //IE8-浏览器返回undefined,其他浏览器返回'left'
- console.log(test.style.cssFloat); //'left'
- //IE浏览器返回'left',其他浏览器返回undefined
- console.log(test.style.styleFloat);
- </script>
特性操作
其实,如果操作行间样式,可以使用元素节点的 hasAttribute()、getAttribute()、setAttribute()、removeAttribute() 等,来操作 style 属性
- <div id="test" style="height: 40px;width: 40px;">
- </div>
- <script>
- console.log(test.hasAttribute('style')); //true
- console.log(test.getAttribute('style')); //'height: 40px;width: 40px;'
- test.setAttribute('style', 'height:10px;');
- console.log(test.getAttribute('style')); //'height:10px;'
- test.removeAttribute('style');
- console.log(test.hasAttribute('style')); //false
- console.log(test.getAttribute('style')); //null
- </script>
cssText
通过 cssText 属性能够访问到 style 特性中的 CSS 代码。在读模式下,cssText 返回浏览器对 style 特性中 CSS 代码的内部表示;在写模式中,赋给 cssText 的值会重写整个 style 特性的值
设置 cssText 是为元素应用多项变化最快捷的方法,因为可以一次性应用所有变化
[注意]IE8 - 浏览器返回的属性名是全大写的
- <div id="test" style="height: 40px;width: 40px;">
- </div>
- <script>
- //IE8-浏览器返回'HEIGHT: 40px; WIDTH: 40px;',其他浏览器返回'height: 40px; width: 40px;'
- console.log(test.style.cssText);
- test.style.cssText = 'height:20px';
- //IE8-浏览器返回'HEIGHT: 20px;',其他浏览器返回'height: 20px;'
- console.log(test.style.cssText);
- </script>
length
length 属性返回内联样式中的样式个数
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px;width: 40px;">
- </div>
- <script>
- console.log(test.style.length); //2
- </script>
parentRule
parentRule 属性表示 CSS 信息的 CSSRule 对象
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px;width: 40px;">
- </div>
- <script>
- //IE8-浏览器返回undefined,其他浏览器返回null
- console.log(test.style.parentRule);
- </script>
item()
item() 方法返回给定位置的 CSS 属性的名称,也可以使用方括号语法
[注意]IE8 - 浏览器不支持 item() 方法,只支持方括号语法
- <div id="test" style="height: 40px;width: 40px;background-color: pink;">
- </div>
- <script>
- //IE9+浏览器返回'width',IE8-浏览器报错,其他浏览器返回'height'
- console.log(test.style.item(0));
- //IE9+浏览器返回'width',IE8-浏览器返回'WIDTH',其他浏览器返回'height'
- console.log(test.style[0])
- </script>
由上面代码可知,IE 浏览器返回值与其他浏览器有差异
getPropertyValue()
getPropertyValue() 方法返回给定属性的字符串值
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px;width: 40px;background-color: pink;">
- </div>
- <script>
- //IE8-浏览器报错,其他浏览器返回'pink'
- console.log(test.style.getPropertyValue('background-color'));
- console.log(test.style.backgroundColor); //'pink'
- console.log(test.style['background-color']); //'pink'
- console.log(test.style['backgroundColor']); //'pink'
- </script>
getPropertyCSSValue()
getPropertyCSSValue() 方法返回包含两个属性的 CSSRule 类型,这两个属性分别是 cssText 和 cssValueType。其中 cssText 属性的值与 getPropertyValue() 返回的值相同,而 cssValueType 属性则是一个数值常量,表示值的类型:0 表示继承的值,1 表示基本的值,2 表示值列表,3 表示自定义的值
[注意] 该方法只有 safari 支持
- <div id="test" style="height: 40px;width: 40px;background-color: pink;">
- </div>
- <script>
- //cssText:"rgb(255, 192, 203)" cssValueType: 1 primitiveType: 25
- console.log(test.style.getPropertyCSSValue('background-color'));
- console.log(test.style.getPropertyCSSValue('background')); //null
- </script>
getPropertyPriority()
如果给定的属性使用了! important 设置,则返回 "important";否则返回空字符串
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px!important;width: 40px;background-color: pink;">
- </div>
- <script>
- console.log(test.style.getPropertyPriority('height')); //'important'
- console.log(test.style.getPropertyPriority('width')); //''
- </script>
setProperty()
setProperty(propertyName,value,priority) 方法将给定属性设置为相应的值,并加上优先权标志 ("important" 或一个空字符串),该方法无返回值
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px;width: 40px;background-color: pink;">
- </div>
- <script>
- console.log(test.style.height); //'40px'
- test.style.setProperty('height', '20px', 'important');
- console.log(test.style.height); //'20px'
- test.style.setProperty('height', '30px');
- //safari浏览器返回'20px',设置过!important后,再设置非important的属性值则无效
- //其他浏览器返回'30px'
- console.log(test.style.height);
- </script>
removeProperty()
removeProperty() 方法从样式中删除给定属性,并返回被删除属性的属性值
[注意]IE8 - 浏览器不支持
- <div id="test" style="height: 40px;width: 40px;background-color: pink;">
- </div>
- <script>
- console.log(test.style.height); //'40px'
- console.log(test.style.removeProperty('height')); //'40px'
- console.log(test.style.height); //''
- console.log(test.style.width); //'40px'
- test.style.width = '';
- console.log(test.style.width); //''
- </script>
模块侦测
CSS 的规格发展太快,新的模块层出不穷。不同浏览器的不同版本,对 CSS 模块的支持情况都不一样。有时候,需要知道当前浏览器是否支持某个模块,这就叫做 "CSS 模块的侦测"
一个比较普遍适用的方法是,判断某个 DOM 元素的 style 对象的某个属性值是否为字符串。如果该 CSS 属性确实存在,会返回一个字符串。即使该属性实际上并未设置,也会返回一个空字符串。如果该属性不存在,则会返回 undefined
- <div id="test">
- </div>
- <script>
- //IE9-浏览器和safari返回undefined,其他浏览器都返回'',所以IE9-浏览器和safari不支持animation
- console.log(test.style.animation)
- //IE和firefox浏览器返回undefined,chrome和safari浏览器都返回'',所以IE和firefox浏览器不支持webkitAnimation
- console.log(test.style.WebkitAnimation)
- </script>
CSS.supports()
CSS.supports() 方法返回一个布尔值,表示是否支持某条 CSS 规则
[注意]safari 和 IE 浏览器不支持
//">
- //"><script>
- //chrome和firefox浏览器返回true,其他浏览器报错
- console.log(CSS.supports('transition', '1s')); < /script>/
来源: http://www.cnblogs.com/xiaohuochai/p/5837478.html