JavaScript による CSS 変更変数
JavaScript で変数を変更する
CSS 変数は DOM にアクセスできるため、JavaScript で変更できます。
前のページで使用した例から --blue 変数を表示および変更するスクリプトを作成する方法の例を次に示します。今のところ、JavaScript に慣れていなくても心配する必要はありません。 JavaScript の詳細については、JavaScript チュートリアル:
例
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function myFunction_get() {
// Get the styles (properties and values) for the root
var rs = getComputedStyle(r);
// Alert the value of the --blue variable
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
// Create a function for setting a variable value
function myFunction_set() {
// Set the value of variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
ブラウザのサポート
表の番号は、完全にサポートされている最初のブラウザ バージョンを示しています。var()関数。
|
関数 |
|||||
|---|---|---|---|---|---|
| だった() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 関数
|
財産 |
説明 |
|---|---|
| だった（） | CSS 変数の値を挿入します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。