05-获取元素宽高的其他方式

<style>
        div{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 50px solid #000;
            background: red;
            background-clip: content-box;
        }
</style>
<div id="box"></div>

• 1. 通过 getComputedStyle获取元素宽高

    1.1 获取的宽高不包括 边框和内边距
    1.2 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    1.3 只支持获取, 不支持设置
    1.4 只支持IE9及以上的浏览器
  

    // 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    var oDiv = document.getElementById("box");
    var style = getComputedStyle(oDiv);
    console.log(style.width);   // 100px
    console.log(style.height);  // 100px
  
    var oDiv = document.getElementById("box");
    oDiv.style.width = "166px";
    oDiv.style.height = "166px";
    var style = getComputedStyle(oDiv);
    console.log(style.width);   // 166px
    console.log(style.height);  // 166px
  
    // 只支持获取, 不支持设置
    var oDiv = document.getElementById("box");
    var style = getComputedStyle(oDiv);
    style.width = "166px";
    style.height = "166px";
    console.log(style.width);   // 报错
    console.log(style.height);  // 报错
  

• 2. 通过 currentStyle属性获取宽高

    2.1 获取的宽高不包括 边框和内边距
    2.2 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    2.3 只支持获取, 不支持设置
    2.4 只支持IE9以下的浏览器
  

    // 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    var oDiv = document.getElementById("box");
    var style = oDiv.currentStyle;
    console.log(style.width);   // 100px
    console.log(style.height);  // 100px
  
    var oDiv = document.getElementById("box");
    oDiv.style.width = "166px";
    oDiv.style.height = "166px";
    var style = oDiv.currentStyle;
    console.log(style.width);   // 166px
    console.log(style.height);  // 166px
  
    var oDiv = document.getElementById("box");
    var style = oDiv.currentStyle;
    style.width = "166px";
    style.height = "166px";
    console.log(style.width);   // 报错
    console.log(style.height);  // 报错
  

• 3. 通过style属性获取宽高

    3.1 获取的宽高不包括 边框和内边距
    3.2 只能获取内设置的宽高, 不能获取CSS设置的宽高
    3.3 可以获取也可以设置
    3.4 高级低级浏览器都支持
  

    // 只能获取内设置的宽高, 不能获取CSS设置的宽高
    var oDiv = document.getElementById("box");
    console.log(oDiv.style.width);  // 
    console.log(oDiv.style.height); // 
  
    // 可以获取也可以设置
    var oDiv = document.getElementById("box");
    oDiv.style.width = "166px";
    oDiv.style.height = "166px";
    console.log(oDiv.style.width);  // 166px
    console.log(oDiv.style.height); // 166px
  

• 4. offsetWidth和offsetHeight

    4.1 获取的宽高包含 边框 + 内边距 + 元素宽高
    4.2 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    4.3 只支持获取, 不支持设置
    4.4 高级低级浏览器都支持
  

    // 获取的宽高包含 边框 + 内边距 + 元素宽高
    var oDiv = document.getElementById("box");
    console.log(oDiv.offsetWidth);  // 300
    console.log(oDiv.offsetHeight); // 300
  
    // 既可以获取行内设置的宽高也可以获取CSS设置的宽高
    var oDiv = document.getElementById("box");
    oDiv.style.width = "166px";
    oDiv.style.height = "166px";
    console.log(oDiv.offsetWidth);  // 366
    console.log(oDiv.offsetHeight); // 366
  
    // 只支持获取, 不支持设置
    var oDiv = document.getElementById("box");
    oDiv.offsetWidth = "166px";
    oDiv.offsetHeight = "166px";
    console.log(oDiv.offsetWidth);  // 300
    console.log(oDiv.offsetHeight); // 300
  

• 这四种方式的区别与联系

  • 1.getComputedStyle/currentStyle/style
    获取的宽高不包括 边框和内边距
  • 2.offsetWidth/offsetHeight
    获取的宽高包括 边框和内边距
    
    
  • 3.getComputedStyle/currentStyle/offsetXXX
    只支持获取, 不支持设置
  • 4.style
    可以获取, 也可以设置
    
    
  • 5.getComputedStyle/currentStyle/offsetXXX
    即可以获取行内,也可以获取外链和内联样式
  • 6.style
    只能获取行内样式