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

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>

带有 .get-color-1 类 echo 的 td 元素，例如，如下所示的颜色代码:#000000 并且每次更改天。我想用 jQuery 为 .custom-kleurcode1 类的 div 提供该颜色的背景。

是否可以读取td的内部并将其用作背景颜色？

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>