这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 JS 之获取样式的简单实现方法 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
基本代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- div{ color:yellow; }
- </style>
- </head>
- <body>
- <div style="width:100px;height:100px;background-color:red">
- This is div
- </div>
- </body>
- </html>
1. 通过使用 element.style 属性来获取
- <script>
- var div = document.getElementsByTagName("div")[0];
- console.log(div.style.color); //""
- console.log(div.style.backgroundColor); //red
- </script>
element.style 属性只能获取行内样式,不能获取 <style> 标签中的样式,也不能获取外部样式
由于 element.style 是元素的属性,我们可以对属性重新赋值来改写元素的显示。
- <script>
- var div = document.getElementsByTagName("div")[0];
- div.style['background-color'] = "green";
- console.log(div.style.backgroundColor); //green
- </script>
2. 通过 getComputedStyle 和 currentStyle 来获取样式
getComputedStyle 的使用环境是 chrome/safari/firefox IE 9,10,11
- <script>
- var div = document.getElementsByTagName("div")[0];
- var styleObj = window.getComputedStyle(div, null);
- console.log(styleObj.backgroundColor); //red
- console.log(styleObj.color); //yellow
- </script>
currentStyle 在 IE 里能得到完美支持,chrome 不支持,ff 不支持
- <script>
- var div = document.getElementsByTagName("div")[0];
- var styleObj = div.currentStyle;
- console.log(styleObj.backgroundColor); //red
- console.log(styleObj.color); //yellow
- </script>
3.ele.style 和 getComputedStyle 或者 currentStyle 的区别
3.1 ele.style 是读写的,而 getComputedStyle 和 currentStyle 是只读的
3.2 ele.style 只能得到行内 style 属性里面设置的 CSS 样式,而 getComputedStyle 和 currentStyle 还能得到其他的默认值
3.3 ele.style 得到的是 style 属性里的样式,不一定是最终样式,而其他两个得到的是元素的最终 CSS 样式
4. 获取样式兼容性写法
- <script>
- //获取非行间样式(style标签里的样式或者link css文件里的样式),obj是元素,attr是样式名
- function getStyle(obj,attr){
- //针对IE
- if(obj.currentStyle){
- return obj.currentStyle[attr]; //由于函数传过来的attr是字符串,所以得用[]来取值
- }else{
- //针对非IE
- return window.getComputedStyle(obj,false)[attr];
- }
- }
- /*
- 获取或者设置css属性
- */
- function css(obj,attr,value){
- if(arguments.length == 2){
- return getStyle(obj,attr);
- }else{
- obj.style[attr] = value;
- }
- }
- </script>
5.window.getComputedStyle(ele[,pseudoElt]);
第二个参数如果是 null 或者省略,则获取得到是 ele 的 CSSStyleDeclaration 对象
如果是一个伪类,则获取到的是伪类的 CSSStyleDeclaration 对象
- <style>
- div{
- width:200px;
- height:200px;
- background-color:#FC9;
- font-size:20px;
- text-align:center;
- }
- div:after{
- content:"This is after";
- display:block;
- width:100px;
- height:100px;
- background-color:#F93;
- margin:0 auto;
- line-height:50px;
- }
- </style>
- <body>
- <div id='myDiv'>
- This is div
- </div>
- <input id='btn' type="button" value='getStyle'/>
- <script>
- var btn = document.querySelector('#btn');
- btn.onclick = function(){
- var div = document.querySelector('#myDiv');
- var styleObj = window.getComputedStyle(div,'after');
- console.log(styleObj['width']);
- }
- </script>
- </body>
6.getPropertyValue 获取 CSSStyleDeclaration 对象中的指定属性值
- <script>
- var div = document.getElementsByTagName("div")[0];
- var styleObj = window.getComputedStyle(div,null);
- console.log(styleObj.getPropertyValue("background-color"));
- </script>
getPropertyValue(propertyName); 中的 propertyName 不能是驼峰式表示
obj.currentStyle['margin-left'] 有效
obj.currentStyle['marginLeft'] 有效
window.getComputedStyle(obj,null)['margin-left'] 有效
window.getComputedStyle(obj,null)['marginLeft'] 有效
window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效
window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效
obj.currentStyle.width 有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor 有效
window.getComputedStyle(obj,null).width 有效
window.getComputedStyle(obj,null).background-color 无效
window.getComputedStyle(obj,null).backgroundColor 有效
综上,就是带有 "-" 的属性不能直接点出来,所以有 getPropertyValue 方法来处理,但是可以用 [] 来取代 getPropertyValue
7.defaultView
在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过 window 对象调用。但有一种情况,你必需要使用 defaultView, 那是在 firefox3.6 上访问子框架内的样式 (iframe)
以上这篇 JS 之获取样式的简单实现方法 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0518/331907.html