js 获取元素的具体样式信息getcss(实例讲解)


Posted in Javascript onJuly 05, 2017

如果想获取元素的某一个具体的样式属性值

1、元素.style.属性名

需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的)

console.log(box.style.height)  ->null

在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离)

2、使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类【一般我们不用伪类写null】)这个方法获取所有经过浏览器计算过的样式

所有经过浏览器计算过的样式:只要当前的元素标签可以在页面中呈现出来,那么他的所有样式都是经过浏览器计算过的(渲染过的)->哪怕有些样式你没有写,我们也可以获取到

获取的结果是CSSStyleDeclaration这个类的实例:包含了当前元素的所有样式属性和值

console.log(window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["height"]

3、方法虽然好用,但是在IE6-8下是不兼容的:因为window下没有getComputedStyle这个属性->会报错

在IE6-8下我们可以使用currentStyle来获取所有经过浏览器计算过的样式

console.log(box.currentStyle)

console.log(box.currentStyle.height)

获取样式的兼容写法getCss:获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值

/*
      curEle:[object] 当前要操作的元素对象 
      attr:[string] 我们要获取的样式属性的名称
      1、使用try、catch来处理兼容(只有在不得已的情况下)
        前提:必须保证try中的代码在不兼容的时候报错,这样才可以catch捕获到错误信息,进行其他的处理
        不管当前的浏览器是否支持这个方法,都需要把try中的代码执行一遍,如果当前是IE7,window.getComputedStyle不兼容,但是也需要执行一遍再执行catch里面的代码,执行了两遍,消耗性能,
      2、判断当前浏览器中是否存在这个属性或者方法,存在就兼容,不存在就不兼容
      3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
      获取当前浏览器是IE6-8
      
    */
    function getCss(curEle,attr){
      var val = null;
      //方法2
      if("window.getComputedStyle" in window){//或者window.getComputedStyle
        var = window.getComputedStyle(curEle,null)[attr];
      }else{
        var = curEle.currentStyle[attr];
      }
      //方法1
      try{
        var = window.getComputedStyle(curEle,null)[attr];
      }catch(e){
        var = curEle.currentStyle[attr];
      }
      //方法3
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        var = curEle.currentStyle[attr];
      }else{
        var = window.getComputedStyle(curEle,null)[attr];
      }
      return val;    
    }
console.log(getCss(box,"border"))
    console.log(getCss(box,"fontFamily"))

标准浏览器和IE浏览器获取的结果还是不一样的->对于部分样式属性,不同浏览器获取的结果不一样,主要是由于getComputedStyle和currentStyle在某些方面不一样

对于复合的样式值可以拆开来获取

console.log(getCss(box,"marginTop"))

上面的getCss还没有写完,下面进行第一次升级:把获取的样式值“单位去掉”(只有符合“数字+单位/数字”才可以使用parseFloat)

function getCss(curEle,attr){
      var val = null;
      var reg = null;
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        var = curEle.currentStyle[attr];
      }else{
        var = window.getComputedStyle(curEle,null)[attr];
      }
      reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;

      return reg.test(val)?parseFloat(val):val; //这样写肯定不行,对于某些样式属性的值是不能去单位的,例如:float position margin padding border  这些复合值 background  
    }

第二次升级:有些样式属性在不同的浏览器中是不兼容的,例如opacity

function getCss(curEle,attr){
      var val = null;
      var reg = null;
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        if(attr==="opacity"){
          val = curEle.currentStyle["filter"];
          //把获取到的结果剖析,获取里面的数字,让数字除以100才和标准浏览器保持一致
          reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
          val = reg.test(val)?reg.exec(val)[1]/100:1

        }else{
          val = curEle.currentStyle[attr];
        }        
      }else{
        //如果传递进来的结果是opacity,说明我想获得的是透明度,但是在IE6-8下获取透明度需要使用filter
        val = window.getComputedStyle(curEle,null)[attr];
      }
    }

在补充一个小的知识点:伪类

:before  :after  在一个元素便签的前面或者后面创建一个新的虚拟标签,我们可以给这个虚拟标签增加样式,也可以增加内容等...也可以通过伪类来进行清除浮动 可以通过如下方式获取 window.getComputedStyle(box,"before").content

以上这篇js 获取元素的具体样式信息getcss(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 #Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 #Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 #Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python模拟三级菜单效果
2017/09/11 Python
python多维数组切片方法
2018/04/13 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
30年同学聚会感言
2014/01/30 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
经典禁毒标语
2014/06/16 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Python 中 Shutil 模块详情
2021/11/11 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL