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 相关文章推荐
将json当数据库一样操作的javascript lib
Oct 28 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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脚本的10个技巧(8)
2006/10/09 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Python自动创建Excel并获取内容
2020/09/16 Python
python中count函数知识点浅析
2020/12/17 Python
小松树教学反思
2014/02/11 职场文书
工程安全员岗位职责
2014/03/09 职场文书
工作岗位说明书模板
2014/05/09 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
2014年法院工作总结
2014/11/24 职场文书
旷课检讨书范文
2015/01/27 职场文书
天那边观后感
2015/06/09 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers