@noevekshen

Получить css свойство элемента vue?

Доброго времени суток подскажите как получить css свойство элемента на vue js
например
<div id="test"></div>
<style>
#test{
color:red
}
</style>

на js это делают примерно так
var el = document.getElementById("test");
color = el.style.color;
как это сделать на vue используя ее реактивность то есть при динамичном изменении стиля что бы вью подхватывала
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 4
origami1024
@origami1024
went out for a night walk
Самый простой вариант - inline-style
<div id="test" :style="{ color: activeColor }"></div>

activeColor - из props или из data

То есть получать ничего не надо, нужно только задавать.
Часть CSS, которая будет как-то изменятся должна строится на основе данных изначально. А потом эти CSS св-ва ты получаешь не на прямую из css, а из данных, на основании которых св-ва CSS обновляются
Ответ написан
kspitfire
@kspitfire
Webdev: PHP (Symfony, Laravel), JS (Vue.js), Go.
Вопрос неправильный. Реактивность в том и заключается, что вы не "подхватываете" изменения, а связываете какое-то состояние (в данном случае - значение css-свойства color) с реактивной моделью Vue (data, props, computed). И работаете с моделью, а не со стилями. Как вам собственно выше и ответили.
Ответ написан
OTCloud
@OTCloud
Не кради код ближнего своего.
Можно так получить, НО в вашем случае такой подход неправильный
let element = document.getElementById("red-block") // #red-block { background: red }
let style = window.getComputedStyle(element)

console.log(style.getPropertyValue("background-color")) // rgb(255,0,0)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 дек. 2019, в 17:44
5000 руб./за проект
06 дек. 2019, в 17:41
1500 руб./за проект
06 дек. 2019, в 17:10
3000 руб./за проект