Javascript .css("font-weight") 行为改变答案

【问题标题】：Javascript .css("font-weight") change of behaviourJavascript .css("font-weight") 行为改变
【发布时间】：2017-12-14 23:57:49
【问题描述】：

我有一个 Javascript 方法来检查元素是否具有粗体字重。

function selected(element) {
    return element.css("font-weight") === "bold";
}

这曾经可以工作，但最近我意识到它已经停止工作了。

即使在检查中，元素的 CSS 与之前相同：

<td title="Example" style="font-weight: bold; color: black;">EXAMPLE</td>

上面的函数返回false。

这是因为，element.css("font-weight") 返回的是一个数字 (700)。

我已将我的功能更改为：

function selected(element) {
    return element.css("font-weight") === "bold" || element.css("font-weight") === "700";
}

而且它有效。有谁知道为什么？我使用的是 Chrome 62.0.3202.94，这会起作用吗？

【问题讨论】：

^ >== 不是一个东西。
这个值什么时候会超过 700？你为什么建议>= 700而不是=== 700？
@RoryMcCrossan This is NOT true。它实际上是一个字符串。
粗体为700，正常为400，文本中的每个font-weight值都有一个数字，看这个developer.mozilla.org/en-US/docs/Web/CSS/font-weight
@ErikKralj 看来我的测试有缺陷 - 你是对的。我删除了我的评论

标签： javascript jquery html css

【解决方案1】：

因为名称bolder, bold, normal 都映射到字体粗细的数值。在 CSS 中，可能的数值比文字名称多，因此 jQuery 返回数值而不是权重的名称。

我建议您完全删除对=== "bold" 的检查，因为它永远不会返回该值。

检查这个： http://htmldog.com/references/css/properties/font-weight/

【讨论】：

说得有道理，但为什么这在 1 个月前还有效？
我对这个特定的方法和 CSS 属性了解不多，但是 jQuery 和/或浏览器的更新可能会影响它。他们可能后来意识到最好只返回一种字体粗细值。我们可以免费查看 jQuery 的源代码，试试看你能找到什么！

【解决方案2】：

您还可以使用element.style.fontWeight 访问该属性以继续使用=== "bold"

【讨论】：

【解决方案3】：

这是一个 jQuery 的东西。显然是 .css() function checks for computed CSS styles。

(function () {
  var el = document.getElementById('el');
  $('#val0').html(window.getComputedStyle(el, null).getPropertyValue("font-weight"));
  $('#val1').html(el.style.fontWeight);
  $('#val2').html($('#el').css("font-weight"));
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="el" style="font-weight: bold;">EXAMPLE</span>
<p>
  Value of font-weight in plain Javascript: <span id="val1"></span>
</p>
<p>
  Value of computed font-weight in plain Javascript: <span id="val0"></span>
</p>
<p>
  Value of font-weight in jQuery: <span id="val2"></span>
</p>

类似问题jquery get css property font-weight returning number instead of 'bold' in IE 。

【讨论】：