如何找到<div>的当前宽度在跨浏览器兼容的方式,而不使用库像jQuery?


当前回答

document.getElementById("mydiv").offsetWidth

元素。offsetWidth (MDC)

其他回答

在div或body标签上调用下面的方法onclick="show(event);" 函数show(event) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

还可以使用ClassName搜索DOM。例如:

document.getElementsByClassName("myDiv")

这将返回一个数组。如果有你感兴趣的房产。例如:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth现在等于div数组中第一个元素的宽度。

另一个选项是使用getBoundingClientRect函数。请注意,如果元素的显示为“none”,getBoundingClientRect将返回一个空的rect。

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

实际上,你不必使用document.getElementById("mydiv")。 你可以简单地使用div的id,像这样: var w = mydiv.clientWidth; 或 var w = mydiv.offsetWidth; 等。

所有的答案都是正确的,但我仍然想给出一些其他可能有效的选择。

如果你正在寻找指定的宽度(忽略填充,边距等),你可以使用。

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle允许您访问该元素的所有样式。例如:padding, paddingLeft, margin, border-top-left-radius等等。