Javascript 为什么浏览器会替换通过css指定的宽度值？

当我为所有选择指定基本样式时，例如

width: 300px;
padding: 0;
margin: 0;
border-width: 1px;

在不同的情况下，通过javascript检索宽度时，我得到了意想不到的结果

• 当选择按钮可见时显示的是298px
• 当选择显示为：无时，宽度也为298px（ff， jquery）
• 当选择位于显示为：none的div中时，宽度正确 300px

（结果也是相同的：框大小：边框框）

嗯，检索到的宽度有时与使用的浏览器和javascript框架不同，但总而言之，我只希望能够检索指定的宽度（300px）。 （我想这与这里所说的“形式怪异”有关：，但为什么浏览器不使用用户指定的宽度？？）

如何检索指定的宽度？真的有办法吗

示例：

（用于使用jquery，或者使用mootools将5替换为4）

---

（使用不同的浏览器查看并尝试）

您将永远无法在css文件中记录该值。使用JavaScript，您将只获得web浏览器当前应用于该元素的css属性

---

在您的情况下，如果宽度确实是固定的，您可以“强制”将其最大宽度设置为300px，或者添加一个

溢出：隐藏

-如果这是一个选项。

对于所选元素，您的浏览器框大小默认为边框框。 尝试放置框大小：内容框；在select和jquery上，您可以得到正确的结果

Jquery使用“width”方法获得内容宽度，这样它就去掉了边距、填充和边框。对于框大小：边框框，给定的宽度将考虑填充和边框

---

Ernoriel

实际上是边界给你带来了麻烦。将边框宽度设置为0，您将能够看到每个人的300px。实际上，浏览器正在按照您的预期将元素的宽度设置为300px，并在其周围添加边框。对于可见元素，您可以通过使用offsetWidth（如果将显示设置为无，则该值将设置为0）获得元素的整个宽度。

在CSS中没有访问指定值的简单方法

当您在jQuery中使用

.css（）

时，您将获得。你所追求的是所谓的

当计算指定的值时，它将根据情况（在您的小提琴中，边框）进行调整。这就是宽度不同的原因。但是，我不知道为什么父div中隐藏的select不适应边框

解决方案1：可能比获取元素的指定值更好的方法是查找其父元素的宽度？看看无论如何都不要在特定的元素上设置宽度（而是在它们的父元素上设置宽度，例如在使用网格系统或类似系统时），这可能是一个很好的做法。在父对象上使用宽度可以有效地限制其子对象的最大宽度

解决方案2：现在，如果您真的想要指定的值，我想您可以浏览

document.styleSheets

，对于每个样式表，访问

cssRules

属性并逐步查找，直到找到要查找的值。当我在Chrome中尝试这一点时，

cssRules

看起来是空的，但是Firefox填充了它，并顺从地列出了附在页面上的每个样式表中的所有样式

我不建议这样做，但如果你决定进入那个洞，你可能会对以下任何一个问题感兴趣：

我也不建议更改

框大小

，因为这将为您提供所需的值，但元素的实际宽度将更宽（基本宽度300px+边框宽度=302px）

如果这些都不能让你的船浮起来，也许是时候坐下来想想（并解释！）你想做什么以及为什么。每当我发现自己想要为简单的任务做非标准的事情时，这并不罕见，因为我的解决方案可能不是最优的，我需要在继续之前缩小一点