我设置的高度和宽度值与返回的值不一致的原因是什么

What is the reason for the discrepancy between the height and width values I set and the ones returned?

本文关键字：返回 不一致 是什么 设置 高度      更新时间：2023-09-26

我是HTML和JavaScript的新手。我正在尝试学习JavaScript width（）和height（）方法。我已经将div1的高度和宽度分别设置为100px和300px。

然而，当我运行代码时，JavaScript返回的高度和宽度分别为299.666666和99.666665。我设置的值和返回的值之间存在差异的原因是什么？

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    var txt = "";
                    txt += "Width of div: " + $("#div1").width() + "</br>";
                    txt += "Height of div: " + $("#div1").height();
                    $("#div1").html(txt);
                });
            });
        </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <br>
        <button>Display dimensions of div</button>
        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>
    </body>
</html>

您可以使用parseInt方法来获取绝对值。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    var txt = "";
                    txt += "Width of div: " + parseInt($("#div1").width())+ "</br>";
                    txt += "Height of div: " + parseInt($("#div1").height());
                    $("#div1").html(txt);
                });
            });
        </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <br>
        <button>Display dimensions of div</button>
        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>
    </body>
</html>

虽然是真的，但我最初的回答与所问的问题无关。由于在评论中被要求澄清，在试图解决这些问题时，我发现了我最初的错误，并且，为了提供一个正确的答案，我发现这个答案与类似的问题非常相关。

adeneo在下面的评论中提到了像素缩放的另一个常见原因是浏览器缩放/缩放（重置Ctrl/Cmd++、Ctrl/Cmd+-、Ctrl/Cmd+0）。

尽管选择了名称，浏览器px与物理、设备像素无关，它们也不是"默认"屏幕单元。所以它需要计算。这是一种非线性角度测量：

如CSS长度、中所定义

参考像素是像素密度为96dpi且与读取器的距离为一臂长的设备上的一个像素的视角。因此，对于28英寸的标称臂长，视角约为0.0213度。因此，对于臂长的读数，1px对应于大约0.26毫米（1/96英寸）。

这里有更详细的解释

造成这种差异的原因是浏览器在缩放功能上有所不同。正如tyler durden在这里所说：

"一些浏览器不能正确缩放的原因与亚像素支持无关，因为它们没有记住确切的位置和正确的舍入。换句话说，它们过早地舍入了位置，导致图像错位。"

事实上，对于你提到的例子，在我的浏览器上，safari总是只缩放文本！

IE、Chrome、Opera和Firefox不仅通过计算文本，还通过计算页面上使用的所有元素（边框、宽度、填充等）来调整大小。此外，边界会影响元素的外边缘，所以让我们看看它是否正确圆角：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script>
        $(window).ready(function () {
            $("button").click(function () {
                var txt = "";
                txt += "Width of div1: " + $(window).width() + "</br>";
                txt += "Width of div1: " + $("#div1").width() + "</br>";
                txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>";
                txt += "Height of div1: " + $("#div1").height();
                $("#div1").html(txt);
                fixSubpixelLayout($('#all-cats'), $('#all-cats .cat'));
            });
        });
    </script>
        <style>
            #div1 {
                height: 100px;
                width: 300px;
                padding: 10px;
                margin: 3px;
                border: 1px solid blue;
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <br>
        <button>Display dimensions of div</button>
        <p>width() - returns the width of an element.</p>
        <p>height() - returns the height of an element.</p>
    </body>
</html>

在我的chrome和firefox上缩放时，边界宽度发生了变化，但它不在我的IE上！！因此，"故障"$（"#div1"）.width（）的原因在于每个浏览器在缩放时使用的计算方法。

如果你想要一个解决问题的方案，你可以使用outline而不是border，以便使border从其内部元素无界。

通常情况下，二进制四舍五入会导致这种情况。

不能确定这个具体的情况，但是，以X为基数取整的数字与转换为Y为基数后取整的相同数字不同。计算机用1和0来计算，并不是所有的语言都能消除这种差异。

相关文章：