実際のフロントエンド開発への行き方：HTMLタグとCSS3のVAR変数が設定されているJS

CSS変数を設定し、HTMLタグ

次のように：

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

直接、通常のようにCSS文のstyleプロパティに設定。

次のスクリーンショットの効果：

二、CSSに設定されたJS変数

以下は、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です。

三、JSは、CSS変数を取得しました

JSのCSS変数を使用して取得することが可能getPropertyValue()に概略的方法を：

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

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

第四に、CSS3のVARの（）の変数

CSS3の  var()変数は、ブラウザのサポートの数は、今、Edge16が完全にサポートしているときではなく、2年前に、良いことです。

それは、この記事のための読書のためのおかげですべてです！

ここで私は為替の円学習をお勧めしますヒントです：767 273 102、最も基本的なHTML + CSS + JSから学んでいるHTML5プロジェクト実際の学習教材のフロントエンドを移動するには、[特殊効果、ゲーム、プラグインパッケージのデザインパターンを冷却します]私たちは、すべての小さなフロントエンドのパートナーに与えられ、仕上げされています。2019年最新の技術、同期およびビジネスニーズ。友人は、フロントエンド技術のタイミングを説明するために、毎日、大きな牛があるだろう、学習交流の内側にあります！

フロントの学習、我々は深刻です