js和jQuery获得元素的宽

蔚落 2024-04-18 17:19 81阅读 0赞

小白一个，欢迎大家一起交流学习n(\*≧▽≦\*)n

盒子模型：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70][]

建立的盒子模型：

![20190910092757357.png][]

**jQuery：**

let wid = $(".div2").width(); //获取content的宽度  200px
        let innerWid = $(".div2").innerWidth();//获取content+padding的宽度  220px
        let outerWid = $(".div2").outerWidth();//获取content+padding+border的宽度  222px
        let outerWidMar = $(".div2").outerWidth(true);//获取content+padding+border+margin的宽度  242px
        console.log("content:"+wid);
        console.log("content+padding:"+innerWid);
        console.log("content+padding+border:"+outerWid);
        console.log("content+padding+border+margin:"+outerWidMar);

结果：

![20190910092909456.png][]

**js**

let div2 = document.getElementsByClassName('div2');
        let div1 = document.getElementsByClassName('div1');
        console.log('content:'+getComputedStyle(div2[0])['width']);
        console.log('content:'+getComputedStyle(div1[0])['width']);
        console.log('content:'+div1[0].style.width); //html元素中内联的宽度 400px
        console.log('content:'+div2[0].style.width); //空
        console.log('content+padding:'+div2[0].clientWidth);
        console.log('content+padding+border:'+div2[0].offsetWidth);

结果：

![20190910101135722.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjA3Mzcx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87d6a7c5fd9741a39eec1193dbf165cd.png
[20190910092757357.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6b102dabc63f4b7baf5acfcb470a1aeb.png
[20190910092909456.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/32e3cccfe41146fd813795a3abe6fb82.png
[20190910101135722.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/012be6f64524438faba8d12121f36d46.png