Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでCSSプロパティの現在の値を取得する方法は？

getComputedStyle（）メソッドは、ターゲット要素に適用されたすべてのスタイルを含むオブジェクトを提供します。

例

次の例は、JavaScriptを使用してCSS変数を取得および設定する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 4%;
   padding: 4%;
   width: 50%;
   text-align: center;
   background-color: powderblue;
   border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

JavaScriptでCSSプロパティの現在の値を取得する方法は？

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   margin: 4%;
   padding: 4%;
   width: 20vh;
   height: 20vh;
   box-shadow: inset 0 0 23px cadetblue;
   border: 2px groove green;
   border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

JavaScriptでCSSプロパティの現在の値を取得する方法は？


  1. CSSの使用法align-contentプロパティflex-endvalue

    align-contentを使用します 値を持つプロパティflex-end 最後にフレックスラインを設定します。 例 次のコードを実行して、 flex-endを実装してみてください。 値。 <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: flex; &n

  2. CSSの役割justify-contentプロパティflex-startvalue

    justify-contentを使用します 値を持つプロパティflex-start フレックスアイテムを最初に揃えます。 例 次のコードを実行して、flex-start値を実装してみてください- <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: flex;