首页 > web前端 > js教程 > 正文

js获取样式的方法

一个新手
发布: 2017-10-19 10:36:43
原创
1374 人浏览过


js获取样式

* {
    margin: 0;
    padding: 0;
}
.box {
    width: 200px;
    height: 100px;
    margin: 100px;
    padding: 50px;
    border: 20px solid #33ff11;
    background-color: #ff4343;
}
登录后复制
<p id="box" class="box"></p>
登录后复制

1. js获取样式的方式1

通过style只能获取行内样式,对于非行内样式,则不能获取

var box = document.getElementById(&#39;box&#39;);
console.log(box.style.width); // ""
console.log(box.style.height); // ""
登录后复制

2. js获取样式的方式2

window.getComputedStyle IE9以下不兼容 使用currentStyle

console.log(window.getComputedStyle(box, null)); // 返回的是对象CSSStyleDeclaration
console.log(window.getComputedStyle(box, null).width); // 200px
console.log(window.getComputedStyle(box, null).margin); // 100px
console.log(window.getComputedStyle(box, null).backgroundColor); // rgb(255, 67, 67)
登录后复制

3. 兼容写法,并去掉单位

function getStyle(ele, attr) {  
    var val = null, reg = null;  
    if (window.getComputedStyle) {    
    val = window.getComputedStyle(ele, null)[attr];
  } else {    
      val = ele.currentStyle[attr];
  }
  reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; // 正则匹配单位 
  return reg.test(val) ? parseFloat(val) : val;
}

console.log(getStyle(box, &#39;width&#39;)); // 200
console.log(getStyle(box, &#39;border&#39;)); // 20px solid rgb(51, 255, 17)
登录后复制

以上是js获取样式的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板