js 怎样获取div的宽度？

Posted 2023-05-06

参考技术A

运用js获取div宽度，原生JS获取DIV的属性有两种方法，js 获取方法命令如下：

currentStyle和getComputedStyle，前者是兼容IE端的，后者也兼容W3C，两者内核不同，所以就有两种兼容的写法。

如果只是单独的获取某个属性值可以这样写：

obj.currentStyle[属性名];这种不兼容-webkit-内核的，

所以一般是封装成一个函数可以到处调用，而且不止针对某个属性值。

function getStyle(obj,styleName)if(obj.currentStyle)return obj.currentStyle[styleName];elsereturn getComputedStyle(obj,null)[styleName];

上面是封装好一个函数，可以直接调用。

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为html（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

js获取元素下所有子元素总宽度赋值给父元素

这个问题是今天在网上看到有人提的。

想要获取#box下面所有div的宽度之和，然后赋值给#box，不论加多少个div，#box的宽都会随着div的增加而改变。

    <style>
    #box{display:inline-block; border:1px #333 solid;}
    </style>
    <div id="box">
        <div style="width:100px; height:50px;"></div>
        <div style="width:100px; height:50px;"></div>
        <div style="width:100px; height:50px;"></div>
        <input type="button" id="btn" value="修改" />
    </div>
    <p class="notice"></p>
    <script>
    $("#btn").click(function(){
        var w=0;
        $("#box div").each(function() {
            w+=parseInt($(this).width());
        });
        $("#box").width(w);//或使用$("#box").css("width",w)一样的    
        $(".notice").html("div的总宽度为："+w);
    });
    </script>

最主要的就是用到了each，遍历所有的div，获取他们的宽度并累加起来。

原文转载自：http://www.santii.com/article/128.html