Как добраться до фактического развития фронтального: HTML-теги и CSS3 вар переменная устанавливается JS

A, HTML теги набор CSS переменные

Как следует:

<div style="--color: #cd0000;">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

CSS заявление непосредственно , как и в обычных styleнастройках на собственность.

Влияние на следующем скриншоте:

CSS настройки стиля переменных эффекты выстрелов

Два, JS переменные установлены в CSS

Ниже HTML схематично:

<div id="box">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

Если вы хотите , var(--color)чтобы вступили в силу, выполните следующий код JavaScript:

box.style.setProperty('--color', '#cd0000');

Т.е. , используя setProperty()метод, следующий эффект является схематическим снимок экрана GIF:

Установка CSS JS переменной GIF Скриншот

Три, JS приобрел CSS переменные

Переменные CSS JS могут быть получены с использованием getPropertyValue()способа , схематически:


// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 

// 输出cssVarColor
// 输出变量值是：#cd0000 
console.log(cssVarColor);

В-четвертых, на CSS3 вар () переменные

CSS3 var()переменная хорошая вещь, а не два года назад, когда число поддержки браузера, теперь Edge16 полностью поддерживает.

Совместимость с вар CSS

Это все, что для этой статьи, спасибо за чтение!

Вот совет, который я рекомендую изучение обмена круг: 767 273 102, который учится с самого основного HTML + CSS + JS [прохладно спецэффекты, игры, плагин шаблоны дизайна упаковки], чтобы переместить передний конец проекта HTML5 реального учебных материалов Мы заканчиваем, каждый даются небольшим фронтальным партнер. 2019 новейших технологии, синхронизация и бизнес-потребности. Друзья внутри учебных обменов, там будет большая корова каждый день, чтобы объяснить сроки фронтального технологии!

Изучение фронта, мы серьезно