JS之获取样式的简单实现方法(推荐)


Posted in Javascript onSeptember 13, 2016

基本代码:

<!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之获取样式的简单实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
js实现右键菜单功能
Nov 28 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 #Javascript
轻松实现js弹框显示选项
Sep 13 #Javascript
JS制作图形验证码实现代码
Oct 19 #Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 #Javascript
javascript数组遍历的方法实例分析
Sep 13 #Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 #Javascript
JS简单去除数组中重复项的方法
Sep 13 #Javascript
You might like
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
Python制作exe文件简单流程
2019/01/24 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
高考自主招生自荐信
2013/10/20 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
文化大革命观后感
2015/06/17 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS