js 获取元素的具体样式信息getcss(实例讲解)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js 获取元素的具体样式信息getcss(实例讲解),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3818字,纯文字阅读大概需要6分钟。
内容图文
![js 获取元素的具体样式信息getcss(实例讲解)](/upload/InfoBanner/zyjiaocheng/343/6d0ab4ecfc64425295c0c4773e5d27aa.jpg)
如果想获取元素的某一个具体的样式属性值
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(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的js 获取元素的具体样式信息getcss(实例讲解)全部内容,希望文章能够帮你解决js 获取元素的具体样式信息getcss(实例讲解)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。