Question

如何使用像jQuery这样的库，以跨浏览器兼容的方式找到<div>的当前宽度？

Answer 1

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

Answer 2

您可以使用clientWidth或offsetWidth Mozilla developer network reference

就像是：

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

或边框宽度：

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

Answer 3

所有答案都是正确的，但我仍然想提供一些其他可能有用的选择。

如果您正在寻找指定的宽度（忽略填充，边距等），您可以使用。

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

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

Answer 4

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

document.getElementsByClassName("myDiv")

这将返回一个数组。如果您感兴趣的是某个特定属性。例如：

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

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

Answer 5

实际上，您不必使用<?php include("db_config.php"); $mysqli->set_charset("utf8"); $codbarra = $mysqli->real_escape_string($_POST["codbarra"]); $query = "UPDATE records SET PARESTALLA = PARESTALLA-1 WHERE CODBARRA = ".$codbarra.";"; $results = array(); $result = $mysqli->prepare($query); $result->execute(); if($result->affected_rows > 0){ echo "OK"; }else{ echo "KO"; } ?> 您可以简单地使用div的id，例如：

document.getElementById("mydiv")
或
var w = mydiv.clientWidth;
等

Answer 6

在div或body标签上调用以下方法onclick =“show（event）;” function 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();
        }


    }

Answer 7

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

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

如果你只使用

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

您可以获得宽度和高度的auto值，因为浏览器在执行完全加载之前不会渲染。

Answer 8

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

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

如何使用vanilla JavaScript找到div的宽度？

8 个答案: