ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript はどのようにして CSS カスタム プロパティにアクセスし、変更できるのでしょうか?
JavaScript はどのようにして CSS カスタム プロパティにアクセスし、変更できるのでしょうか?
- Linda Hamiltonオリジナル
- 2024-12-09 03:01:09864ブラウズ
JavaScript を使用した CSS カスタム プロパティへのアクセス
JavaScript は、CSS 変数とも呼ばれる CSS カスタム プロパティにアクセスして操作するためのメソッドを提供します。通常の CSS プロパティとは異なり、これらのカスタム プロパティには、スタイルシートの var(...) 構文を通じてアクセスできます。
カスタム プロパティ値の取得
値を取得するにはカスタム プロパティの場合は、window.getComputedStyle(document.body).getPropertyValue('--name') を使用します。ここで --name はカスタム プロパティ名です。例:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');
カスタム プロパティ値の設定
カスタム プロパティ値を設定するには、document.body.style.setProperty('--name', value)、ここで --name はカスタム プロパティ名、value は新しい値です。例:
document.body.style.setProperty('--foo-bar', 'red');
例
次のコードを考えてみましょう:
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style.setProperty('--mycolor', 'red');
document.body.style['font-weight'] = 'bold';
};
function jQuery_() {
$('body').css('--mycolor', 'red');
$('body').css('font-weight', 'bold');
}
</script>
</body>
「Plain JS」または「jQuery」ボタンをクリックします。 --mycolor カスタム プロパティを赤太字に設定します。
以上がJavaScript はどのようにして CSS カスタム プロパティにアクセスし、変更できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。