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

HTMLDOMスタイルのbackfaceVisibilityプロパティ

backfaceVisibilityプロパティは、ユーザーが直面したときに要素の背面を表示するかどうかを指定するために使用されます。要素を回転させたときにその裏側を見たいかどうかを確認できるように、3D変換でのみ重要です。

構文

以下は、-

の構文です。

backfaceVisibilityプロパティの設定-

object.style.backfaceVisibility = "visible|hidden|initial|inherit"

値

以下は値です-

Sr.No 値と説明
1 表示
これにより、裏面が表示され、デフォルト値になります。
2 非表示
これは裏側を隠します。
3 初期
このプロパティを初期値に設定します。
4 継承
親プロパティ値を継承します。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      position: relative;
      height: 80px;
      width: 80px;
      background-color: lightgreen;
      float: left;
      text-align: center;
      letter-spacing: 0.8px;
      margin-bottom:10px;
   }
   #one {
      transform: rotateY(180deg);
      backface-visibility: visible;
   }
   p{
      clear:both;
   }
</style>
<script>
   function visibilityChange(){
      document.getElementById("one").style.backfaceVisibility="hidden";
      document.getElementById("Sample").innerHTML="The backface visibility is now set to hidden.";
   }
</script>
</head>
<body>
<div id="one">Lateral Inversion</div>
<div>Lateral inversion</div>
<br>
<p>Click the below button to change the above div backface visibility value</p>
<button onclick="visibilityChange()">CHANGE VISIBILITY</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルのbackfaceVisibilityプロパティ

[可視性の変更]ボタンをクリックすると-

HTMLDOMスタイルのbackfaceVisibilityプロパティ


  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