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

HTML DOM blockquoteのciteプロパティとは？設定方法と使い方を解説

HTML DOM の blockquote cite プロパティは、HTML の <blockquote> 要素に関連付けられたプロパティです。このプロパティを使うことで、引用文に設定された cite 属性の値を取得したり、新しい値を設定したりすることができます。

cite プロパティで扱うのは、引用元の URL です。この属性は主にスクリーンリーダーなどの支援技術のために用意されており、通常のブラウザ表示に対しては視覚的な効果を持ちません。

構文

cite プロパティを設定する際の基本的な構文は以下の通りです。

blockquoteObject.cite = URL

ここで URL には、引用元の場所を示すアドレスを指定します。

サンプルコード

blockquote cite プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Quote</h2>
<p>Here is a quote:</p>
<blockquote id="myBlockquote" cite="www.webexample.com">
Here is some sample text in place of quote.
</blockquote>
<p>Click the button below to change the above quote cite value.</p>
<button onclick="citeChange()">CHANGE</button>
<p id="Sample"></p>
<script>
    function citeChange() {
        document.getElementById("myBlockquote").cite = "https://www.examplesite.com";
        document.getElementById("Sample").innerHTML = "The value of the cite attribute was changed to 'www.examplesite.com' ";
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM blockquoteのciteプロパティとは？設定方法と使い方を解説

CHANGE ボタンをクリックすると、表示は次のように変化します。

HTML DOM blockquoteのciteプロパティとは？設定方法と使い方を解説

コードの解説

まず、id「myBlockquote」を持つ <blockquote> 要素を用意し、cite 属性の初期値として「webexample.com」を設定しています。

<blockquote id="myBlockquote" cite="www.webexample.com">
Here is some sample text in place of quote.
</blockquote>

続いて、クリックすると citeChange() 関数を呼び出す CHANGE ボタンを配置しています。

<button onclick="citeChange()">CHANGE</button>

citeChange() 関数は、getElementById() メソッドによって id「myBlockquote」を持つ要素を取得し、その cite 属性の値を「www.examplesite.com」へと書き換えます。属性値の変更後、「cite属性の値が 'www.examplesite.com' に変更されました」というメッセージが、id「Sample」が付与された段落内に表示される仕組みです。

function citeChange() {
    document.getElementById("myBlockquote").cite = "https://www.examplesite.com";
    document.getElementById("Sample").innerHTML = "The value of the cite attribute was changed to 'www.examplesite.com' ";
}
  1. HTML DOM textContentプロパティの使い方を徹底解説

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

  2. 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