HTML5的自定义属性data-*详细介绍和JS操作实例

2021-06-11 20:03

阅读：578

标签：html box 操作 att 样式 order width 介绍 ade

这篇文章主要介绍JS操作HTML自定义属性的方法,

以实例形式分析了html中自定义属性的设置与对应的javascript操作技巧

具体如下：

HTML代码如下（其中的displayName为自定义属性）：

获取自定义属性值:

document.getElementById("txtBox").getAttribute("displayName");
document.getElementById("txtInput").attributes["displayName"].nodeValue

设置自定义属性值:

document.all.txtBox.setAttribute("displayName ","123456");
document.getElementById("txtInput").attributes["displayName"].nodeValue = "123456"

关于data-属性选择器

在实际开发时，您可能会发现它很有用，你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素：

代码如下:

// 选择所有包含 ‘data-flowering‘ 属性的元素
document . querySelectorAll ( ‘[data-flowering]‘ ) ;

// 选择所有包含 ‘data-text-colour‘ 属性值为red的元素
document . querySelectorAll ( ‘[data-text-colour="red"]‘ ) ;

同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式，例如下面这个例子：

代码如下:

.user[data-name=‘feiwen‘] {
color : brown
}

.user[data-name=‘css‘] {
color : red
}

码头

HTML5的自定义属性data-*详细介绍和JS操作实例

标签：html box 操作 att 样式 order width 介绍 ade

原文地址：http://www.cnblogs.com/wu-hou/p/7290998.html

上一篇：html-解决乱码问题

下一篇：《.NET 设计规范》第 4 章：类型设计规范

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML5的自定义属性data-*详细介绍和JS操作实例
文章链接：http://soscw.com/index.php/essay/93695.html

亲，登录后才可以留言！

HTML5的自定义属性data-*详细介绍和JS操作实例

评论

热门文章

推荐文章

最新文章

置顶文章