主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 在HTML中定义样式有3种方法:通过link标签来引用外部的样式表文件,使用style元素来定义嵌入式样式和使用style特性来针对特定的元素设置样式。“DOM2级样式”模块是围绕这3种应用样式...
在HTML中定义样式有3种方法:通过 var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0"); var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0"); 如果浏览器支持DOM2级的CSS能力,上面的代码返回的变量值为 任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例,包含着所有通过HTML的style特性指定的所有的样式信息,但是不包括与外部样式表或嵌入样式表经过层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。 需要注意的是,在JavaScript中,访问CSS属性使用的是驼峰格式,而在CSS样式中的CSS属性使用的是“-”连接的形式。所以在使用的时候要将“-”连接形式的CSS属性转换为驼峰形式的JavaScript属性,例如下面的例子:
有一个例外的CSS属性是float属性,因为它是JavaScript的保留字,所以它不能用来作为属性名称。在“DOM2级样式”规范规定该属性对应的JavaScript属性为cssFloat,Firefox、Chrome、Safari和Opera浏览器都支持这个属性,但是IE浏览器支持的是styleFloat属性。
我们只要取得了一个有效的DOM元素的引用,就可以随时使用JavaScript来为它添加样式。例如下面的例子: <div id="myDiv"></div> <script type="text/javascript"> var div = document.getElementById("myDiv"); //设置DIV元素的背景颜色 div.style.backgroundColor = "#f00"; //修改DIV元素的大小 div.style.width = "100px"; div.style.height = "150px"; //指定DIV元素的边框 div.style.border = "1px solid #00f"; </script> 通过style对象,我们也可以取得style特性中指定的CSS样式,例如下面的例子: <div id="myDiv" style="background-color:#f00;width:200px;height:300px;"></div> <script type="text/javascript"> var div = document.getElementById("myDiv"); console.info(div.style.backgroundColor); console.info(div.style.width); console.info(div.style.height); </script> “DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素style特性值的同时,也可以修改元素的样式。
通过 var div = document.getElementById("myDiv"); div.style.cssText = "background-color:#f00;width:200px;height:300px;"; console.info(div.style.cssText);
for(var i = 0,len = div.style.length; i < len; i++){ console.info(div.style[i]); //或者使用item() //console.info(div.style.item(i)); } 通过 for(var i = 0,len = div.style.length; i < len; i++){ var prop = div.style[i];//或者:var prop = div.style.item(i); var value = div.style.getPropertyValue(prop); console.info(prop+":"+value); }
只有Safari 3+和Chrome浏览器支持 要从元素样式中移除某个CSS属性,可以使用 div.style.removeProperty("backgroundColor"); Firefox、Chrome、Safari和Opera 9+都支持以上的属性和方法,但是IE浏览器只支持cssText属性。Safari 3+和Chrome浏览器是唯一支持getPropertyCSSValue()方法的浏览器。
虽然style对象能够提供支持style特性的任何元素的样式信息,但是它不包含那些从其它样式表层叠过来的样式。“DOM2级样式”增强了 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>getComputedStyle()</title> <style type="text/css"> #myDiv{ width: 100px; height: 100px; background-color: #ff0; } </style> </head> <body> <div id="myDiv" style="background-color:#f00;border:1px solid #f00;"></div> </body> </html> 在上面的HTML代码中,应用到 var div = document.getElementById("myDiv"); var computedStyle = document.defaultView.getComputedStyle(div,null); console.info(computedStyle.backgroundColor); console.info(computedStyle.width); console.info(computedStyle.height); console.info(computedStyle.border); 由于在设置 IE浏览器不支持 var div = document.getElementById("myDiv"); var computedStyle = document.currentStyle; console.info(computedStyle.backgroundColor); console.info(computedStyle.width); console.info(computedStyle.height); console.info(computedStyle.border); 和DOM版本相同,IE也没有返回 无论在哪个浏览器中,所有的计算样式都是只读的,不能修改计算后样式对象中的CSS属性。另外,计算后的样式也包括属于浏览器内部样式表的样式信息。例如,所有的浏览器的 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com