HTML DOM del cite屬性用法及代碼示例

與 HTML <del> 元素關聯的 HTML DOM del cite 屬性用於告訴用戶為什麽網站上的某些文本被刪除。它通過指定說明為什麽給定文本被刪除的 url 來實現。

del cite 屬性增加了我們網站的可訪問性，因為它沒有視覺提示，但可以幫助屏幕閱讀器。 del cite 屬性設置或返回 HTML <del> 元素的 cite 屬性值。

用法

以下是語法 -

設置引用屬性 -

delObject.cite = URL

此處，URL 指定說明文本被刪除原因的文檔的 URL。 URL 可以是相對的或絕對的。

示例

讓我們看一個 HTML DOM del cite 屬性的例子 -

<!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>

輸出

這將產生以下輸出 -

單擊更改引用按鈕 -

在上麵的例子中 -

我們首先在 <p> 元素中創建了 <del> 元素，該元素的 id 為 “Del1”，並且 del 元素的 cite 屬性值設置為 “sampleDeleted.html”。

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

然後我們創建了一個 “Change Cite” 按鈕，當用戶點擊時，它將執行 citeChange() 方法 -

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

citeChange() 方法使用 getElementById() 方法獲取 <del> 元素並將其 cite 屬性值更改為“https://example.com/deletedText.html”。然後我們使用段落元素的innerHTML 屬性在id 為“Sample” 的段落中顯示此更改。 “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'.";
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM del cite Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。