如何确定宽度是以像素（px）还是百分比（%）为单位

Question

如何判断 CSS 属性，例如宽度（如： width:100%），是否已分配 px 或 %。例如，在 Chrome 中，如果我有 width:250px;，并且我使用 $('div').width()，我将得到 250，而如果我使用百分比，则只会根据我的屏幕分辨率获得相应的像素宽度。

- Pinkie

---

请详细说明您的情况。您需要这些信息做什么？您将如何使用这些信息？据我所知，如果您通过DOM“style”对象读取宽度，则会以像素为单位获取宽度。这并不意味着宽度是以像素为单位设置的。 - Cheeso

你所说的 CSS 属性是指 CSS 规则还是内联样式？ - Esailija

为什么这很重要？你将如何从这些知识中受益？ - Ash Burlaczenko

@Esailija 我指的是内联和类。 - Pinkie

@Esailija，如果您已经准备好代码，请发布它。 - Pinkie

Answer 1

这应该可以工作。

var value = $('#id').get(0).style.width;
var hasPx = value.indexOf('px') >= 0;
var hasPct = value.indexOf('%') >= 0;

JSBin: http://jsbin.com/asewit/2/edit#javascript,html

- Sajid

---

这对我不起作用。你能在jsfiddle上展示一下例子吗？ - Pinkie

请查看 http://jsfiddle.net/wc4m4/1/。我做错了吗？它弹出的是像素而不是百分比。 - Pinkie

是的。你正在检查 hasPct.length。它不是一个字符串，而是一个布尔值。只需执行 hasPct ? 'pct' : 'px'。 - Sajid

True。但在您的情况下，如果 hasPct 为 false，则可以将值设置为像素、ems、points。 - vtambourine

Answer 2

如果“CSS属性”指的是CSS规则，而不是直接在元素中设置的内联样式属性，则没有快速获取它的方法。您需要：

1. 查询所有CSS规则声明
2. 循环遍历每个CSS规则，并检查元素是否与规则匹配并将其推入数组
3. 循环遍历候选项并获取最新的宽度值或带有! important的最新宽度值

如果您指的是内联样式，则太简单了，以至于很难理解为什么这个问题得到了这么多赞： element.style.width并检查是否存在px或％

编辑：这里是用于CSS规则查询的不完整演示： http://jsfiddle.net/Chjnd/1/ 在Google Chrome和Firefox中测试

- Esailija

---

要以百分比获取宽度，元素必须具有“display: none”。这是一个更简单的解决方案： https://stackoverflow.com/a/30251040/6705873 - Laiacy

Answer 3

您可以使用包含实际CSS代码的.style.cssText：

$("<div style='width:50px'>").get(0).style.cssText // "width: 50px; "
$("<div style='width:50% '>").get(0).style.cssText // "width: 50%; "

- pimvdb

---

我无法像你的示例中展示的那样引用元素。我需要检查 $('#id').width() 是否有 px 或 %。我该如何排版语法？ - Pinkie

@Pinkie：那么就是$("#id").get(0).style.cssText。 - pimvdb

这种方法的问题是它会得到多个规则。例如：$("<div style='width:50px;height:90px'>").get(0).style.cssText // "width: 50px; height: 90px; " - Kip

我认为它只适用于内联样式，无法从样式表中获取规则：http://jsfiddle.net/SmFZe/ - Kip