博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html自定义datajs,HTML5的自定义属性data-*详细介绍和JS操作实例
阅读量:5869 次
发布时间:2019-06-19

本文共 857 字,大约阅读时间需要 2 分钟。

这篇文章主要介绍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 {

width : 256px ;

height : 200px ;

}

.user[data-name=‘feiwen‘] {

color : brown

}

.user[data-name=‘css‘] {

color : red

}

1
码头

转载地址:http://pdtnx.baihongyu.com/

你可能感兴趣的文章
我的友情链接
查看>>
ubuntu 镜像站部署
查看>>
Xshell 连接虚拟机慢 解决方案
查看>>
我的友情链接
查看>>
PHP - 如何打印函数调用树
查看>>
js闭包
查看>>
寒假。3.3.G - Common Child (最大公共子序)
查看>>
设计模式学习笔记--原型模式
查看>>
.Net 通过MySQLDriverCS操作MySQL
查看>>
JS Cookie
查看>>
ubuntu Unable to locate package sysv-rc-conf
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
【吉光片羽】短信验证
查看>>
MacBook如何用Parallels Desktop安装windows7/8
查看>>
gitlab 完整部署实例
查看>>
GNS关于IPS&ASA&PIX&Junos的配置
查看>>
七天学会ASP.NET MVC (四)——用户授权认证问题
查看>>
upgrade to iOS7,how to remove stroyboard?
查看>>
影响企业信息化成败的几点因素
查看>>