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

HTMLDOMスタイルboxShadowプロパティ

HTML DOM box-shadowプロパティは、要素のフレーム内またはフレームの周囲にシャドウを取得または設定するために使用されます。

以下は、-

の構文です。

boxShadowプロパティの設定-

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

プロパティ値は次のように説明されます-

値 説明
なし これはデフォルト値であり、影は表示されません。
h-オフセット これは、影が水平オフセットからどれだけ離れているかを指定します。これは必須の値であり、正の値は影がボックスの右側から来ることを示し、負の値は影がボックスの左側から来ることを意味します。
vオフセット これは、影が垂直オフセットからどれだけ離れているかを指定します。これは必須の値であり、正の値は影がボックスの下側から来ることを示し、負の値は影がボックスの上側から来ることを意味します。
ぼかし ぼかし半径を指定します。
スプレッド 拡散半径を指定します。
色 シャドウの色を指定します。
挿入図 これにより、要素のシャドウが外側から内側に移動します。
初期 このプロパティを初期値に設定します。
継承 親プロパティ値を継承するには

boxShadowプロパティの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      height: 100px;
      width: 100px;
      box-shadow: 10px 10px 3px orange;
   }
</style>
<script>
   function changeBoxShadow(){
      document.getElementById("DIV1").style.boxShadow="1px 10px 10px 10px green";
      document.getElementById("Sample").innerHTML="The box shadow is changed now ";
   }
</script>
</head>
<body>
   <div id="DIV1">This is a sample div</div>
   <p>Change the above div border width by clicking the below button</p>
   <button onclick="changeBoxShadow()">Change Box Shadow</button>
   <p id="Sample"></p>
</body>
</html>

出力

HTMLDOMスタイルboxShadowプロパティ

「ボックスシャドウの変更」をクリックすると ボタン-

HTMLDOMスタイルboxShadowプロパティ


  1. HTMLDOMスタイルのcounterIncrementプロパティ

    HTML DOMスタイルのcounterIncrementプロパティは、1つ以上のCSSカウンターの値を増減するために使用されます。これは通常、counterResetおよびcontentプロパティと一緒に使用されます。 以下は、-の構文です。 counterIncrementプロパティの設定- object.style.counterIncrement = "none|id|initial|inherit" 上記のプロパティ値は次のように説明されます- 値 説明 なし これはデフォルト値であり、カウンターはインクリメントされません。

  2. HTMLDOM値プロパティ

    HTML DOM valueプロパティは、要素の属性の値に対応する文字列を返します。 以下は構文です- 文字列値を返す elementAttribute.value HTMLDOM値の例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM value</title> <style>    * {       padding: 2px;       margin:5p