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 相关文章推荐
JavaScript中Function()函数的使用教程
Jun 04 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
javascript常用经典算法详解
Jan 11 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
原生js实现碰撞检测
Mar 12 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
thinkphp命名空间用法实例详解
2015/12/30 PHP
html下载本地
2006/06/19 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python FTP操作类代码分享
2014/05/13 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
医学实习生自我鉴定
2013/12/12 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
C++程序员求职信
2014/05/07 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
nginx配置之并发频次限制
2022/04/18 Servers
oracle数据库去除重复数据
2022/05/20 Oracle