JavaScriptでCSS変数を取得および設定する
getComputedStyle（）メソッドは、ターゲット要素に適用されたすべてのスタイルを含むオブジェクトを提供します。 getPropertyValue（）メソッドは、計算されたスタイルから目的のプロパティを取得するために使用されます。 setProperty（）は、CSS変数の値を変更するために使用されます。
例
次の例は、JavaScriptを使用してCSS変数を取得および設定する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--outerColor: magenta;
--innerColor: lightgreen;
text-align: center;
}
div {
margin: 5%;
padding: 10%;
background-color: var(--innerColor);
border: 2px groove var(--outerColor);
}
</style>
</head>
<body>
<div onmouseover="showColor()" onmouseout="changeColor()">
<p></p>
</div>
</body>
<script>
let ele = document.querySelector(':root');
let para = document.querySelector('p');
function showColor() {
let cs = getComputedStyle(ele);
para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color");
}
function changeColor() {
let item = document.querySelector('div');
item.style.setProperty('--innerColor', 'magenta')
}
</script>
</html> 出力
これにより、次の結果が生成されます-
例
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--customColor: seagreen;
}
div {
margin: 5%;
width: 130px;
height: 130px;
box-shadow: inset 0 0 38px var(--customColor);
border-radius: 50%;
}
</style>
</head>
<body>
<div onmouseover="toggle()"></div>
</body>
<script>
let ele = document.querySelector(':root');
function toggle() {
let cs = getComputedStyle(ele);
let item = document.querySelector('div');
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
}
</script>
</html> 出力
これにより、次の結果が生成されます-
-
JavaScriptとCSSを使用したエフェクトの入力と削除
CSSアニメーションの助けを借りて、JavaScriptを使用してタイプライターの入力および削除効果を作成できます。 次の例は、この効果を示しています。 例 <!DOCTYPE html> <html> <style> div { display: flex; margin: 4%; padding: 2%; box-shadow: inset 0 0 12px blue; } p { font-family: "Co
-
CSSとJavaScriptでアコーディオンを作成するにはどうすればよいですか？
CSSとJavaScriptを使用してアコーディオンを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo { background-color: #eee; cursor: pointer; paddi