Question

我有一个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，它是否起到了作用？

Answer 1

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

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

检查一下： http://htmldog.com/references/css/properties/font-weight/

Answer 2

您还可以使用element.style.fontWeight访问该媒体资源以继续使用=== "bold"

Answer 3

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

＆＃13;

(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"));
})();

＆＃13;

<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>

＆＃13;

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

Javascript .css（“font-weight”）行为更改

3 个答案: