/*
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"))
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
}
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];
}
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有