Как я могу изменить значение свойства CSS на значение элемента?

Question

Как я могу изменить значение свойства CSS на значение элемента?

У меня есть следующая разметка:

<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 Класс echo, например, цветовой код, например: #000000 и меняется каждый день. Я хочу дать фон div с классом .custom-kleurcode1 этот цвет с JQuery.

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

1

background-color css jquery php

Решение

Accepted Answer

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

2

Другие решения

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

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

1

Источник