Блог

Главная - Вопросы по программированию - Установите пользовательское свойство / переменную CSS из javascript в качестве типа String

Установите пользовательское свойство / переменную CSS из javascript в качестве типа String

#javascript #css #dom #css-variables

#javascript #css #dom #css-переменные

Вопрос:

Рассмотрим следующий сценарий:

 document.body.style.setProperty("--text", "world")  
 body::before{
  --text: "Hello";
  content: var(--text, "...");
}

body::after{
  content: var(--text, "...");
}

CSS может задать тип переменной, указав значение пользовательского свойства --text в кавычках, но когда то же самое делается с javascript setProperty , это результат (проверенного) узла (в Chrome), который не имеет кавычек, что делает невозможным использование в качестве content значения псевдоэлемента:

введите описание изображения здесь

Можно ли это как-то сделать с помощью JS setProperty ? (предполагая, что у элемента уже есть куча вещей в его style атрибуте, с которыми я не хочу связываться.

Комментарии:

1. Обязательно ли это должна быть переменная CSS? Разве вы не можете просто установить свойство данных body , а затем использовать content: attr(data-property) его в своих псевдоэлементах?

2. Да, это должен быть Рикард

Ответ №1:

Установите его как so:

 document.body.style.setProperty("--text", "'world'")

Проблема теперь в этом:

 var word = "world";

document.body.style.setProperty("--text", word)  
 body::before{
  --text: "Hello";
  content: var(--text, "...");
}

body::after{
  content: var(--text, "...");
}

Что можно решить с помощью:

 document.body.style.setProperty("--text", JSON.stringify(word))

Ответ №2:

Если вы используете свойства привязки к данным, например, Knockout JS, вы можете установить строковое значение «», используя синтаксис литерала шаблона

HTML

 <div data-bind="style: {'--text': self.Word() }" style='--prefix: "";'>

JS

 self.Word = ko.observable(`"${word}"`)