Question

我有以下标记：

<tr>
  <th>Colorcode:</th>
  <td class="get-color-1"><?php echo $debtor['CustomFields'['kleurcode1'];?>
    <div class="custom-kleurcode1" style="width:40px; height:40px;></div>
  </td>
</tr>

<script type="text/javascript">
  $(document).ready(function(){
    $(".custom-kleurcode1").css("background-color","yellow");
  });
</script>

例如，具有td类回显的.get-color-1元素的颜色代码为#000000，并且每天都在变化。我想为div类.custom-kleurcode1的背景赋予jQuery的颜色。

是否可以读取td的内部并将其用作background-color？

Answer 1

将值放入DOM中的文本节点后，您可以使用.custom-kleurcode1从this.previousSibling.textContent元素的范围中检索其值。您可以向css()提供一个函数，该函数读取返回值以设置要设置的值，如下所示：

$(document).ready(function() {
  $(".custom-kleurcode1").css("background-color", function() {
    return this.previousSibling.textContent;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Colorcode:</th>
    <td class="get-color-1">
      <!-- <?php echo $debtor['CustomFields'['kleurcode1'];?> -->
      #CC0000
      <div class="custom-kleurcode1" style="width:40px; height:40px;"></div>
    </td>
  </tr>
</table>

话虽如此，如果您可以访问PHP中的颜色代码，为什么在服务器端生成HTML时不只是内联设置颜色样式？

<table>
  <tr>
    <th>Colorcode:</th>
    <td class="get-color-1">
      <div class="custom-kleurcode1" style="width: 40px; height: 40px; background-color: <?php echo $debtor['CustomFields'['kleurcode1'];?>"></div>
    </td>
  </tr>
</table>

Answer 2

您可以放置颜色，例如在您的td的单独属性中：

<td class="get-color-1" data-attr-color="<?php echo $debtor['CustomFields'['kleurcode1'];?>">

然后从那里拿走

var colorCode = $(".get-color-1").attr("data-attr-color");

并更改背景颜色：

$(".custom-kleurcode1").css("background-color", colorCode);

如何将CSS属性值更改为元素的值？

2 个答案: