CSS псевдо-класс исчезает после обновления значения переменной через JS - PullRequest
Новая
       21

CSS псевдо-класс исчезает после обновления значения переменной через JS

1 голос
/ 10 мая 2019

Я хотел бы иметь возможность обновлять переменную CSS через JS, но когда я делаю переменную, обновление псевдоэлемента CSS get уничтожается (то есть просто исчезает).

Вот код SCSS: 

:root {
  --test-thing: "";
}

.folder-1-open span::after {
    width: 90%;
    height: 85%;
    bottom: 0;
    left: 5%;
    background-color: #fff;
    z-index: 3;
    content: var(--test-thing);
}

Я пытаюсь манипулировать переменной таким образом: 

const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")

CSS выше прекрасно работает на элементе (aметка), к которой он применяется, в основном просто белый квадрат, но как только я пытаюсь обновить переменную CSS --test-thing, чтобы добавить строку с помощью content prop, все это просто исчезает.

Разве нельзя сделать это с псевдоэлементом или классом?

Из исследований связанных постов на SO я понял, что это возможно с помощью переменных CSS.

Для контекста, Я работаю над этим примером чистой интерактивной папки CSS (когда она открыта, когда я хочу динамически обновлять содержимое).

1 Ответ

3 голосов
/ 10 мая 2019

Хорошо, я понял, почему это происходит, вроде как. Все еще не уверен на 100%, почему, но это как-то связано с тем, что новое значение не в кавычках. Просто поместите значение в кавычки, и оно отлично работает. 

const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
  --test: "";
}

#test {
  height: 100px;
  width: 100px;
  background: #ccc;
}
#test:after {
  content: var(--test);
  min-width: 100px;
  background: #000;
  min-height: 30px;
  color: #fff;
}
<div id="test">

</div>
...