Javascript 我设置的高度和宽度值与返回的值之间存在差异的原因是什么？
我不熟悉HTML和JavaScript。我正在尝试学习JavaScript的width（）和height（）方法。我已经将div1的高度和宽度分别设置为100px和300px 但是，当我运行代码时，JavaScript返回的高度和宽度分别为299.666666和99.666665。我设置的值与返回的值之间存在差异的原因是什么Javascript 我设置的高度和宽度值与返回的值之间存在差异的原因是什么？,javascript,html,css,Javascript,Html,Css,我不熟悉HTML和JavaScript。我正在尝试学习JavaScript的width（）和height（）方法。我已经将div1的高度和宽度分别设置为100px和300px 但是，当我运行代码时，JavaScript返回的高度和宽度分别为299.666666和99.666665。我设置的值与返回的值之间存在差异的原因是什么 <!DOCTYPE html> <html> <head> <script src="https://aj
<!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>
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var txt=“”；
txt++=“div的宽度：++$（“#div1”）.Width（）+””；
txt++=“div的高度：++$（“#div1”）.Height（）；
$（“#div1”）.html（txt）；
});
});
#第一组{
高度：100px；
宽度：300px；
填充：10px；
保证金：3倍；
边框：1px纯蓝色；
背景颜色：浅蓝色；
}
显示div的尺寸
width（）-返回元素的宽度
height（）-返回元素的高度
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>
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var txt=“”；
txt+=“div的宽度：”+parseInt（$（“#div1”）.Width（））+“”；
txt+=“div的高度：”+parseInt（$（“#div1”）.Height（）；
$（“#div1”）.html（txt）；
});
});
#第一组{
高度：100px；
宽度：300px；
填充：10px；
保证金：3倍；
边框：1px纯蓝色；
背景颜色：浅蓝色；
}
显示div的尺寸
width（）-返回元素的宽度
height（）-返回元素的高度
无法确定此特定情况，但在baseX中舍入一个数字与转换为baseY后舍入的数字不同。计算机用1和0进行计算，并不是所有的语言都能消除差异。虽然是真的，但我最初的回答与所问的问题无关。由于在评论中要求澄清，在试图解决这些问题时，我发现了我最初的错误，并试图为类似问题提供一个恰当的答案，这与上述问题非常相关 下面评论中提到的像素缩放的另一个常见原因是浏览器缩放/缩放（
Ctrl/Cmd+Ctrl/Cmd-Ctrl/Cmd0尽管选择了浏览器的名称，但浏览器
px更详细的解释。造成这种差异的原因是浏览器在缩放功能上存在差异。如前所述： “某些浏览器不能正确缩放的原因与亚像素支持无关，这是因为他们没有记住确切的位置和正确的舍入。换句话说，他们过早地舍入了位置，导致图像对齐错误。” 事实上，对于您提到的示例，在我的浏览器上，safari总是只缩放文本 IE、Chrome、Opera和Firefox不仅通过计算文本，还通过计算页面上使用的所有元素（边框、宽度、填充等）来调整大小。此外，边框会影响元素的外边缘，以便查看其是否正确圆角：
$（窗口）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var txt=“”；
txt++=“div1的宽度：”++$（窗口）.Width（）+“”；
txt++=“div1的宽度：++$（“#div1”）.Width（）+””；
txt++=“div1的左内边框宽度：++$（“#div1”）.css（“边框左边框宽度”）+””；
txt++=“div1的高度：++$（“#div1”）.Height（）；
$（“#div1”）.html（txt）；
修复子像素（$（“#所有猫”），$（“#所有猫.猫”）；
});
});
#第一组{
高度：100px；
宽度：300px；
填充：10px；
保证金：3倍；
边框：1px纯蓝色；
背景颜色：浅蓝色；
}
显示div的尺寸
width（）-返回元素的宽度
height（）-返回元素的高度