Как передать значения из тегов JS в HTML в веб-компоненте молнии?
Я пытаюсь передать цвет существующему стилю тега HTML из Javascript. Однако это не работает, как я пытаюсь. Пожалуйста помоги.
Фактический HTML
<template if:true = {bmirange1}>
<div style = "color: red; position:auto">BMI: {bmiValue}</div>
</template>
Что я пытаюсь
<template if:true = {bmirange1}>
<div style = "color:"{colorcode}"; position:auto">BMI: {bmiValue}</div>
</template>
Пробовал, но не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы не можете объединять значения в шаблоне, но если colorcode имеет red значение по умолчанию, вы можете определить геттер, который возвращает все содержимое атрибута стиля:
JS
get divStyle() {
return `position:auto; color ${this.colorcode}`;
}
HTML
<template if:true = {bmirange1}>
<div style = {divStyle}>BMI: {bmiValue}</div>
</template>
Вы также можете определить соответствующий класс для этого цвета в файле CSS и установить цвет с помощью пользовательского свойства (например, --bmi-color):
.dynamicColor {
color: var(--bmi-color, red);
}
В JS при изменении свойства colorcode вам также нужно будет установить это пользовательское свойство css:
document.documentElement.style.setProperty('--bmi-color', this.colorcode);
Тогда ваш шаблон будет
<template if:true = {bmirange1}>
<div class = "dynamicColor" style = "position:auto">BMI: {bmiValue}</div>
</template>
Потрясающий. У меня была некоторая идея, что конкатенация невозможна в таких сценариях, поэтому мы можем использовать JS, чтобы получить полное значение стиля. Но не знал о пользовательских свойствах в CSS. Это сработало. Большое спасибо!!
Как насчет выхода из кавычек? Нравится
"color:\"{colorcode}\";..."