HTML DOM del cite 属性

htmlweb developmentfront end technology更新于 2024/5/20 10:52:17

HTML DOM del cite 属性与 HTML <del> 元素关联,用于告知用户网站上某些文本被删除的原因。它通过指定 URL 来实现,该 URL 说明了指定文本被删除的原因。

del cite 属性提高了我们网站的可访问性,因为它没有视觉提示,但可以帮助屏幕阅读器。del cite 属性设置或返回 HTML <del> 元素的 cite 属性的值。

语法

以下的语法 −

设置 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">部分文本已被删除</del></p>

然后,我们创建了一个 “更改引用” 按钮,当用户点击该按钮时,会执行 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'.";
}

相关文章


有用资源