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

HTML DOMdelciteプロパティ

HTML要素に関連付けられたHTMLDOMdel citeプロパティは、Webサイト上の一部のテキストが削除された理由をユーザーに通知するために使用されます。これは、指定されたテキストが削除された理由を示すURLを指定することによって行われます。

del citeプロパティは、視覚的な手がかりがないため、当社のWebサイトのアクセシビリティを向上させますが、スクリーンリーダーには役立ちます。 del citeプロパティは、HTMLの要素のcite属性の値を設定または返します。

構文

以下は、-

の構文です。

引用プロパティの設定-

delObject.cite = URL

ここで、URLは、テキストが削除された理由を示すドキュメントのURLを指定します。 URLは相対または絶対にすることができます。

例

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

<!DOCTYPE html>
<html>
<head>
<title>Del cite</title>
<style>
#Sample{color:blue};
</style>
</head>
<body>
<h2>del cite property example</h2>
<p><del id="Del1" cite="sampleDeleted.html">Some text has been deleted</del></p>
<p>Click the below button to change the cite attribute value of the above deleted text</p>
<button onclick="citeChange()">Change Cite</button>
<p id="Sample"></p>
<script>
   function citeChange() {
      document.getElementById("Del1").cite = "https://example.com/deletedText.html";
      document.getElementById("Sample").innerHTML = "The del cite attribute value was changed to 'https://example.com/deletedText.html'.";
   }
</script>
</body>
</html>

出力

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

HTML DOMdelciteプロパティ

[引用の変更]ボタンをクリックすると-

HTML DOMdelciteプロパティ

上記の例では-

最初に、ID「Del1」が関連付けられた

要素内に要素を作成し、del要素のcite属性値を「sampleDeleted.html」に設定しました。

<p><del id="Del1" cite="sampleDeleted.html">Some text has been deleted</del></p>

次に、ユーザーがクリックしたときにciteChange（）メソッドを実行する「ChangeCite」ボタンを作成しました-

<button onclick="citeChange()">Change Cite</button>

citeChange（）メソッドは、getElementById（）メソッドを使用して要素を取得し、そのciteプロパティ値を「https://example.com/deletedText.html」に変更します。次に、段落要素のinnerHTMLプロパティを使用して、IDが「Sample」の段落にこの変更を表示します。 「サンプル」段落内のテキストは、そのIDに対応するスタイルが適用されているため、青色で表示されます-

function citeChange() {
   document.getElementById("Del1").cite = "https://example.com/deletedText.html";
   document.getElementById("Sample").innerHTML = "The del cite attribute value was changed to 'https://example.com/deletedText.html'.";
}

  1. HTMLDOMOlタイププロパティ

    HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style>   &n

  2. HTML DOMOlstartプロパティ

    HTML DOM Ol startプロパティは、順序付きリストのstart属性の値を設定/返します。 以下は構文です- 数値を返す olObject.start 開始の設定 番号に olObject.start = number Ol startの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol start</title> <style>    form {       widt