获得计算样式的正确方法是等待页面呈现。它可以通过以下方式完成。注意获取自动值的超时。

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

如果你用just

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

您可以获得宽度和高度的自动值，因为浏览器直到执行满负载才会呈现。

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

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

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

document.getElementsByClassName("myDiv")

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

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

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

在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();
        }


    }

document.getElementById("mydiv").offsetWidth

元素。offsetWidth (MDC)

您可以使用clientWidth或offsetWidth Mozilla开发人员网络引用

就像:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

或与边框宽度:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width