style方法
style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式获,取不了外部的样式,即这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的属性。
注意:currentStyle属性和getComputedStyle属性不能设置属性,只能获取!!!
getComputedStyle()
方法
getComputedStyle()属于window对象
document.defaultView.getComputedStyle(element[,pseudo-element]);
(备注)defaultView:在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。
大部分情况下,这是不需要的, 可以直接通过 window 对象调用。但有一种情况,你必需要使用 defaultView,
那是在 Firefox 3.6 上访问子框架内的样式 (iframe)。除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外,
其他的浏览器(包括 IE9 )返回的都是 true。所以后面直接使用 window 就好,不用在输入那么长的代码了。
或者
window.getComputedStyle(element[,pseudo-element]);
getComputedStyle(元素,[伪类])第二个参数是可选的,通常会将其设为null;返回值为一个对象,包含该元素的所有样式属性。
getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据,例如 style.backgroundColor。需要注意的是,返回的对象的键名是 css 的驼峰式写法,background-color -> backgroundColor。
注意:float 是 JS 的保留关键字。根据 DOM2 级的规范,取元素的 float 的时候应该使用 cssFloat。其实 chrome 和 Firefox 是支持 float 属性的,也就是说可以直接使用。
兼容性问题:在 Chrome 、Firefox 、IE 9+是支持该属性的,IE 8并不支持该属性。 IE 8 支持的 element.currentStyle 属性,这个属性返回的值和 getComputedStyle 的返回基本一致,只是在 float 的支持上,IE 8 支持的是 styleFloat。
currentStyle方法
Element.currentStyle
是一个与Window.getComputedStyle()
方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。语法:
element.currentStyle[相应元素名称];
或者
element.currentStyle.相应元素名称;
浏览器获取适相应配样式方法
function styleDecide(obj,name) {
if (window.getComputedStyle){
//适配Chrome、火狐、IE9以上版本浏览器
return getComputedStyle(obj,null)[name];
} else {
//适配IE8浏览器
return obj.currentStyle[name];
}
}
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .ban{ color: aqua; font-size: 32px; background-color: #888888; border: none; width: 300px; height: 100px; text-align: center; margin: auto; } </style> <script type="text/javascript"> window.onload = function () { var but_submit = document.getElementById("but_submit"); var p_submit = document.getElementById("p_submit"); but_submit.onmouseover = function () { //document.write(but_submit.value); p_submit.innerHTML = but_submit.value; //but_submit.currentStyle.color; p_submit.style.color = styleDecide(but_submit,"color"); }; //浏览器获取适配样式 function styleDecide(obj,name) { if (window.getComputedStyle){ //适配Chrome、火狐、IE9以上版本浏览器 return getComputedStyle(obj,null)[name]; } else { //适配IE8浏览器 return obj.currentStyle[name]; } } }; </script> </head> <body> <input id="but_submit" class="ban" type="submit" value="登录"> <p id="p_submit"></p> </body> </html>