Question

<rect class="day" fill="#fbedf0" data-count="0"></rect>
<rect class="day" fill="#cqe45b" data-count="0"></rect>

我正在尝试使用jQuery编辑多个标签的填充颜色值。

我能够遍历所有rect标记并获取其填充值，但无法使用css（）函数对其进行更改，并给出错误，指出read css属性为null

for(let i=0; i<rect.length; i++){
  if(rect[i].getAttribute("fill") === "cqe45b"){
    $('rect[i]').css({fill:"#2038fb"});
  }
}

我本质上需要的是，如果填充颜色为＃cqe45b ，我想将其更改为＃2038fb ，如果它是＃cbedf0 < / em>，我要制作它＃c7ef80

更新： 我正在尝试在不允许导入jQuery的第三方网站上执行此功能，因此，有什么办法可以解决此问题？

Answer 1

获取所有rect.day[fill="#cqe45b"]元素，然后使用.attr()设置fill属性的值。

$('rect.day[fill="#cqe45b"]').attr("fill", "#2038fb");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg viewBox="0 0 300 50" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect class="day" fill="#fbedf0" x="0" y="0" width="50" height="50" />

  <!-- Rounded corner rect element -->
  <rect  class="day" fill="#cqe45b" x="120" y="0" width="50" height="50" rx="15" ry="15" />
</svg>

您可以将jQuery替换为document.querySelectorAll()和Element.setAttribute()。

注意：IE不支持NodeList.forEach()。如果需要支持IE，可以将其替换为for循环。

document.querySelectorAll('rect.day[fill="#cqe45b"]')
  .forEach((el) => {
    el.setAttribute("fill", "#2038fb")
  });

<svg viewBox="0 0 300 50" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect class="day" fill="#fbedf0" x="0" y="0" width="50" height="50" />

  <!-- Rounded corner rect element -->
  <rect  class="day" fill="#cqe45b" x="120" y="0" width="50" height="50" rx="15" ry="15" />
</svg>

Answer 2

要更改DOM元素的任意属性，您想使用try { const v1 = await f1(); } catch (err) { // Process err } try { const v2 = await f2(v1); } catch (err) { // Process err }。 http://api.jquery.com/attr/

.attr应该可以工作。

您可以像这样实现$(rect[i]).attr("fill", "#2038fb");：

if... else

Answer 3

fill是一个属性，这就是为什么它不会在.css方法上更改的原因。试试这个：

for(let i=0; i<rect.length; i++){
  if(rect[i].getAttribute("fill") === "#cqe45b"){
    $(this).attr("fill","#2038fb");
  }
}

使用jQuery更改多个标签的填充颜色

3 个答案: