Как я могу изменить значение свойства 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>

Элемент td с эхом класса .get-color-1, например, такой код цвета: #000000 и меняется каждый день.Я хочу дать фон div с классом .custom-kleurcode1 этого цвета с помощью jQuery.

Можно ли прочитать внутреннюю часть td и использовать ее как background-color?

Answer 1

Вы можете поместить цвет, например, в отдельный атрибут вашего тд:

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

Answer 2

Когда значение помещается в текстовый узел в 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>