HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな

  2. HTML DOM offsetTopプロパティとは？使い方と取得できる値をサンプル付きで解説

    HTML DOM offsetTopプロパティとは HTML DOMのoffsetTopプロパティは、指定した要素の上端が、親要素の上端からどれだけ離れているかを示す数値（ピクセル単位）を返します。JavaScriptで要素の垂直方向の位置を取得したい場合に活用できる、基本的かつ重要なプロパティです。 例えば、スクロールに応じたアニメーションや、要素の位置に基づいたレイアウト制御などを実装する際に役立ちます。 構文 offsetTopプロパティは、ピクセル（px）単位の数値を返します。構文は以下のとおりです。 HTMLelement.offsetTop 戻り値に含まれるもの offsetT

  3. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  4. HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

    HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。 Ol要素の作成方法 JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。 var olObject = document.createElement(OL) ここで作成した「olObject」は、以下のプロパティを持っています。 プロパティ説明 reversedリストの順序を降順にするか、昇順（デフォル

  5. HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説

    HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示

  6. HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

    ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの

  7. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1

  8. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ

  9. HTML DOM Navオブジェクトとは？動的にナビゲーションバーを生成する方法を解説

    HTML DOM NavオブジェクトとはHTML DOM Navオブジェクトは、HTMLドキュメント内の<nav>要素を表すオブジェクトです。<nav>要素は、ページ内の主要なナビゲーションリンクをまとめるために使われるHTML5のセマンティック要素であり、JavaScriptからはdocument.createElement(NAV)で動的に生成したり、既存の要素にアクセスして操作したりすることができます。ここでは、ユーザーが入力したリンク名をもとに、ナビゲーションバーを動的に作成する実装例を紹介します。実装例以下のサンプルコードでは、テキスト入力欄にリンク名を入力し

  10. HTML DOMのnextElementSiblingプロパティとは？使い方とサンプルコードを解説

    nextElementSiblingプロパティとは HTML DOMのnextElementSiblingプロパティは、指定した要素ノードの直後に隣接している要素ノード（次の兄弟要素）を返します。 注意：このプロパティは、テキストノードやコメントノードを無視し、要素ノードのみを対象とします。HTMLソース内の空白や改行によるテキストノードの影響を受けずに、確実に次の要素を取得できるのが特徴です。なお、次の兄弟要素が存在しない場合は null が返されます。 構文 nextElementSiblingノードを取得するための構文は以下の通りです。 nodeList.nextElementSibl

  11. HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

    HTML DOMのnextSiblingプロパティは、指定した要素ノードの直後に隣接するノードを返します。戻り値はNodeオブジェクトで、該当するノードが存在しない場合はnullが返されます。nextSiblingプロパティの注意点このプロパティは、テキストノードやコメントノードを無視しません。HTMLソース内で要素と要素の間に改行やスペースがあると、それらはテキストノードとして扱われるため、nextSiblingが要素ノードではなくテキストノードを返すことがあります。要素ノードだけを確実に取得したい場合は、要素ノードのみを対象とするnextElementSiblingプロパティを使用するのが

  12. HTML DOMのnodeNameプロパティとは？使い方と戻り値をわかりやすく解説

    HTML DOMのnodeNameプロパティとはHTML DOMのnodeNameプロパティは、ノードの名前に対応する文字列を返します。要素ノード、属性ノード、コメントノードなど、ノードの種類に応じて異なる値が返されるため、DOM操作の際にノードの種類を判別したい場合に非常に役立ちます。nodeNameプロパティの構文nodeNameプロパティの構文は以下のとおりです。文字列値を返します。Node.nodeNameこのプロパティは読み取り専用で、呼び出すだけでノード名を文字列として取得できます。ノードの種類ごとの戻り値nodeNameプロパティの戻り値は、ノードの種類によって以下のように異なり

  13. HTML DOMのnodeTypeプロパティとは？使い方と戻り値の一覧を解説

    HTML DOMのnodeTypeプロパティは、ノードの種類に対応する数値を返すプロパティです。JavaScriptでDOMを操作する際、対象のノードが要素なのかテキストなのかコメントなのかを判別したい場面でよく使われます。 nodeTypeプロパティの構文 構文は以下のとおりです。読み取り専用のため、値を取得することしかできません。 Node.nodeType 戻り値の一覧 nodeTypeプロパティが返す主な数値は次のとおりです。 1 … 要素ノード（element node） 2 … 属性ノード（attribute node） 3 … テキストノード（text node） 8 … コメ

  14. HTML DOMのnodeValueプロパティとは？ノード値の取得・設定方法を実例付きで解説

    HTML DOMのnodeValueプロパティは、ノードの値に対応する文字列を取得または設定するために使用されます。DOM操作において、テキストノードや属性ノードの中身を扱う際に非常に便利な基本プロパティです。構文（値の取得）ノードの値を文字列として取得する場合は、以下のように記述します。Node.nodeValue取得される戻り値は、ノードの種類によって以下のように異なります。ドキュメントノードおよび要素ノード：「null」が返される属性ノード：その属性の「value」の値が返されるテキストノードおよびコメントノード：それぞれの内容（テキストやコメント文）が返される構文（値の設定）nodeV

  15. HTML DOM normalize()メソッドとは？テキストノードの正規化をわかりやすく解説

    normalize()メソッドとはHTML DOMのnormalize()メソッドは、指定したノード内にある空のテキストノードを削除し、隣接するテキストノードどうしをひとつのノードに結合するためのメソッドです。JavaScriptでDOMを動的に操作していると、意図せず空のテキストノードが残ったり、複数のテキストノードが連続して存在したりすることがあります。normalize()メソッドを使えば、こうした不要なノードを一括で整理でき、childNodesリストをクリーンな状態に保つことができます。構文normalize()メソッドの基本的な呼び出し方は以下の通りです。document.norm

  16. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ

  17. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要

  18. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

  19. HTML DOM MouseEvent clientYプロパティとは？マウスのY座標を取得する方法を解説

    MouseEvent の clientY プロパティは、マウスイベントが発生した際のマウスポインタの縦方向（Y）の座標値を返します。clientX プロパティと組み合わせることで、横方向（X）の座標も同時に取得できます。これらの座標は、ブラウザの表示領域（ビューポート）の左上隅を原点（0,0）とした相対位置で表されます。そのため、画面上でカーソルが現在どの位置にあるのかを正確に把握したい場面、例えばドラッグ＆ドロップの実装やミニゲームの作成などで活躍します。構文clientY の値を参照する基本的な構文は以下の通りです。MouseEventObject.clientY戻り値はピクセル単位の数値

  20. HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

    MouseEvent offsetXプロパティとはHTML DOMのMouseEvent offsetXプロパティは、マウスイベントが発生した際に、ターゲット要素を基準としたマウスポインタの水平方向（X軸）の座標を返します。垂直方向（Y軸）の座標を取得したい場合は、offsetYプロパティと組み合わせて使用します。これらのプロパティを活用することで、要素内でのマウスの正確な位置を把握でき、ドラッグ＆ドロップ操作やゲーム、カスタムカーソル追従機能など、さまざまなインタラクティブなWebアプリケーションの実装に役立ちます。構文（シンタックス）offsetXプロパティの値を参照する基本的な構文は以下

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:14/101  20-コンピューター/Page Goto:1 8 9 10 11 12 13 14 15 16 17 18 19 20