5

当我为所有选择分配基本样式时，例如。

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

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

  • When the select is visible the with is 298px .
  • When the select is display:none , the width is also 298px (ff, jquery)
  • When the select is in a div with display:none , the width is correct 300px .

（结果也是一样的赋值：box-sizing:border-box）

好吧，检索到的宽度有时与使用的浏览器和 javascript 框架不同，但总而言之，我只想能够检索分配的宽度（300px）。（我想这与这里所说的“正式的怪异”有关：http: //meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/，但为什么浏览器不使用用户指定的宽度？？）

如何检索分配的宽度？真的有办法吗？

例子：

http://jsfiddle.net/ETCcH/5/（用于使用 jquery，或将 5 替换为 4，例如使用 mootools）

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

4

4 回答 4

2

你永远不会得到写在 css 文件中的值。使用 JavaScript，您将只能获得 Web 浏览器当前应用于该元素的 css 属性。

在您的情况下，如果宽度确实是固定的，您可以“强制”它，将 max-width 设置为 300px 或添加overflow: hidden- 如果这是一个选项。

于 2012-05-25T09:40:02.170 回答
2

实际上是边界给你带来了麻烦。将边框宽度设置为 0，您将能够看到每个人的 300 像素。实际上，浏览器将元素的宽度设置为您期望的 300 像素，并在周围添加边框。对于可见元素，您可以使用 offsetWidth 获取元素的整个宽度（如果您将显示设置为无，它将设置为 0。）

于 2012-05-25T10:01:51.260 回答
0

对于选择元素，默认情况下，您的浏览器框大小似乎是边框框。尝试放置 box-sizing: content-box; 在 select 和 jquery 上给你正确的结果。

Jquery 使用 'width' 方法为您获取内容宽度，以便去除边距、填充和边框。使用 box-sizing:border-box，给定的宽度会考虑填充和边框。

厄诺里尔

于 2012-05-25T09:45:43.840 回答
0

没有简单的方法可以访问 CSS 中的指定值。

当您.css()在 jQuery 中使用时，您将获得计算值。您所追求的称为指定值。

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

解决方案 1：也许比获取元素的指定值更好的方法是查找其父元素的宽度？了解永远不要在特定元素上设置宽度（而是在其父元素上设置宽度，例如在使用网格系统或类似系统时）是一种很好的做法，这可能是您的方法。在父母身上使用宽度有效地限制了其孩子的最大宽度。

解决方案 2：现在，如果您确实需要指定的值，我想您可以遍历document.styleSheets每个样式表，访问该cssRules属性并按照自己的方式进行操作，直到找到您正在寻找的值。当我在 Chrome 中尝试此操作时，cssRules它似乎是空的，但 Firefox 会填充它并乖乖地列出附加到页面的每个样式表中的所有样式。

我不推荐它，但如果你决定去那个洞，你可能会对这些 SO 问题中的任何一个感兴趣：

我不建议更改box-sizing其中之一，因为这将为您提供您正在寻找的值，但元素的实际宽度会更宽（基本宽度 300 像素 + 边框 = 302 像素宽）。

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

于 2012-05-25T10:13:40.123 回答