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

HTMLDOMスタイルbackgroundSizeプロパティ

HTML DOMスタイルのbackground-sizeプロパティは、背景画像のサイズを設定または取得するために使用されます。

構文

以下は、-

の構文です。

backgroundSizeプロパティの設定-

object.style.backgroundSize = "auto|length|cover|contain|intial|inherit"

プロパティ

上記の特性は次のように説明されます-

Sr.No プロパティと説明
1 自動
背景画像はフルサイズで表示され、デフォルト値です。
2 長さ
背景画像の幅と高さを設定します。最初の値は幅、2番目の値は高さです。値が1つだけ指定されている場合、欠落している値はデフォルトでautoになります。
3 パーセンテージ
背景画像の幅と高さをパーセンテージで設定します。パーセンテージは、親の高さと幅に基づいて計算されます。最初の値は幅を設定し、2番目の値は高さを設定します。値が1つだけ指定されている場合、欠落している値はデフォルトでautoになります。
4 カバー
背景画像を拡大縮小して、背景領域全体をカバーするようにします。
5 含む
高さと幅がコンテンツ領域内に収まるように画像を拡大縮小します。
6 初期
このプロパティを初期値に設定します。
7 継承
親プロパティ値を継承するには

例

HTMLDOMスタイルのbackgroundSizeプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      box-shadow: 0 2px 0 4px mintcream;
      padding: 45px;
      background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
      background-size: 150px 150px;
   }
</style>
<script>
   function changeBackSize(){
      document.getElementById("DIV1").style.backgroundSize="100px 100px";
      document.getElementById("Sample").innerHTML="The background image size is now reduced";
   }
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>Change the background image size for the above div by clicking the below button</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルbackgroundSizeプロパティ

[サイズ変更]ボタンをクリックすると-

HTMLDOMスタイルbackgroundSizeプロパティ


  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