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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
paypal即时到账php实现代码
2010/11/28 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
python日志logging模块使用方法分析
2019/05/23 Python
Python二维码生成识别实例详解
2019/07/16 Python
使用python模拟高斯分布例子
2019/12/09 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
用python绘制樱花树
2020/10/09 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
教师党员思想汇报
2014/01/06 职场文书
环境卫生标语
2014/06/09 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android