js笔记五十二之获取元素样式信息(1)

2023年4月19日 114次阅读 来源: uplyw
获取元素的某一个具体样式属性值
  1. 元素.style.属性名

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

<style>
    #box{
        height:240px;
    }
</style>
<div id="box" style="width:100px">123</div>
<script>
var box = document.getElementById("box");
console.log(box.style.height); // -> ""
console.log(box.style.width); // -> "100px"
// 在真实项目中这种方式不常用, 因为真实项目中不能为了获取值吧所有样式都写在行内(无法实现css和html的分离)
</script>
  1. 使用window.ComputedStyle这个办法获取所有经过浏览器计算过的样式

所有经过浏览器计算过的样式: 只要当前的元素标签可以在页面中呈现出来, 那么他的所有样式都是经过浏览器计算过的(渲染过的) -> 哪怕有些样式没有写,也可以获取到
window.getComputedStyle(当前要操作的元素对象,当前元素的伪类[一般不用伪类写null])

var box = document.getElementById("box");
console.log(window.getComputedStyle); // -> function -> 方法
console.log(window.getComputedStyle(box,null).height)

方法虽然好用,但是在IE6~8下不兼容: 因为window下没有getComputedStyle这个属性 -> 在IE6~8下执行这个方法会报错
在IE6~8下可以使用currentStyle来获取所有经过浏览器就算过的样式

console.log(box.currentStyle.height);

处理兼容
getCss: 获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值
curEle: [object]要获取的样式属性的名称
attr: [string]要获取的样式属性的名称

// 1. 使用try,catch来处理兼容(只有在不得已的情况下才使用)
// 前提: 必须保证try中的代码在不兼容浏览器中执行的时候报错,这样的话才可以用catch捕获到异常的信息,进行其他的处理;
// 不管当前是什么浏览器,都需要先把try中的代码执行一遍,如果当前是IE7,window.getElementStyle本身是不兼容的,但是我也要先把他执行一遍,报错了,再把curEle.currentStyle执行一遍(消耗性能)

function getCss(curEle,attr){
    var val = null;
    try{
        val = window.getComputedStyle(curEle, null)[attr];
    }catch(e){
        val = curEle.currentStyle[attr];
    }
    return val;
}
console.log(getCss(box,"height"));

// 2.判断当前浏览器中是否存在这个属性或方法,存在就兼容,不存在就不兼容;
function getCSS(curEle, attr){
    var val = null;
    if("getComputedStyle" in window){
        // -> 如果返回的是true,说明window下有getComputedStyle这个属性,代表兼容
        val=window.getComputedStyle(curEle,null)[attr];
    }else{
        // 代表不兼容
        val = curEle.currentStyle[attr];
    }
    return val;
}
console.log(getCss(box,"height"));


// 2.1 
function getCSS(curEle, attr){
    var val = null;
    if(window.getComputedStyle){ 
    // 首先获取属性值,兼容返回的是一个函数,转换为布尔值是true;
    // 不兼容返回的是undefined,转换为布尔值是false;
        val=window.getComputedStyle(curEle,null)[attr];
    }else{
        val = curEle.currentStyle[attr];
    }
    return val;
}
console.log(getCss(box,"height"));


// 2.2
function getCSS(curEle, attr){
    var val = null;
    if(typeof window.getComputedStyle === "function"){
        val=window.getComputedStyle(curEle,null)[attr];
    }else{
        val = curEle.currentStyle[attr];
    }
    return val;
}
console.log(getCss(box,"height"));

// 3.通过检测浏览器版本来处理兼容  
// window.navigator.userAgent // -> 获取浏览器信息 
// 获取当前浏览器是IE6~8
// /MSIE (6|7|8)/.test(navigator.userAgent)
function getCSS(curEle, attr){
    var val = null;
    if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        val = curEle.currentStyle[attr];
    }else{
        val=window.getComputedStyle(curEle,null)[attr];
    }
    return val;
}
console.log(getCss(box,"height"));
    原文作者：uplyw
    原文地址: https://www.jianshu.com/p/8b316327d046
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞