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

HTMLの高さ属性

HTMLの高さ属性は、要素の高さ（ピクセル単位）を宣言するために使用されます。

注 − HTML5現在 「％」で高さを指定するサポートが削除されました。

HTMLの次の要素にはheight属性があります-

  • キャンバス
  • 埋め込み
  • iframe
  • img
  • 入力
  • オブジェクト
  • ビデオ

動画の高さの例を見てみましょう プロパティ-

例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video height</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-height</legend>
<video id="wordPressIntro" width="320" height="50" controls><source src=" https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Video Not Visible">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var wordPressIntro = document.getElementById("wordPressIntro");
   function getTrackDetails() {
      wordPressIntro.height += 50;
      divDisplay.textContent = 'Video height: '+wordPressIntro.height;
   }
</script>
</body>
</html>

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

1）[動画が表示されない]をクリックする前 ボタン-

HTMLの高さ属性

2）「動画が表示されない」をクリックします ’ボタンを3回-

HTMLの高さ属性


  1. HTMLパターン属性

    HTMLパターン属性は、HTML要素の値がHTMLドキュメントで一致する正規表現を定義します。 構文 以下は構文です- <input pattern=”regular expression”> HTMLパターン属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;      

  2. HTMLDOMビデオの高さプロパティ

    HTML DOMビデオの高さプロパティは、メディアの高さ（ピクセル単位）に対応する数値を返す/設定します。 構文 以下は構文です- 高さを返す 数値として（px） mediaObject.height 高さの設定 数値（px）に mediaObject.height = number 動画の高さの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Video height</title> <style>    * {