JS具有数据属性值的属性
JS hasAttribute with data attribute value
有没有一种原生方法,没有jQuery,来检查dom元素是否具有具有所选值的属性。例如:
//assume doc has
data-mod="do" defined
这将是真的:
document.hasAttribute('data-mod');
但这将是错误的:
document.hasAttribute('data-mod="do"')
有没有办法在具有值的 DOM 元素上本机检查数据属性?
您必须通过getAttribute
访问属性的值,并将其与预期的字符串进行比较:
if (node.getAttribute('data-mod') === 'do') {
...
}
对于现代浏览器,您可以使用matches
:
if (node.matches('[data-mod="do"]')) {
...
}
或者对于[data-*]
属性,您可以使用dataset
:
if (node.dataset.mod === 'do') {
...
}
你可以
用dataset
正确地做到这一点,
if (elementNode.dataset['mod'] == 'do') {
//your code goes here.
}
通过使用dataset
您可以轻松访问元素的数据属性。
是的,这里是:
var selector = document.getElementsByTagName("H1")[0]; //Exemple of a h1
if (selector.getAttribute('data-mod') == "do"){
//Do your logic
}
这可能有效...
var list = document.querySelectorAll('[data-mod="do"]');
你可以
使用Element.attributes
function data(el, dataName, dataValue) {
for (var i = 0; i < el.attributes.length; i++) {
if (/^(data)(?=-'w+|=[^=]*$|=$|$)/g.test(el.attributes[i].name)) {
if (dataName && el.attributes[i].name === "data-" + dataName) {
if (dataName && dataValue
&& el.attributes[i].name === "data-" + dataName
&& el.attributes[i].value === dataValue) {
return true
}
return true
} else {
return true
}
}
}
return false
}
var elems = document.querySelectorAll("div");
for (var i = 0; i < elems.length; i++) {
console.log(data(elems[i]))
}
var _name = "prop", _value = "123";
console.log("element #"
+ elems[1].id
+" has `data-*` attribute name:"
+_name
+", value:"+_value
, data(elems[1], _name, _value))
<div data="abc">abc</div>
<div id="prop" data-prop="123">123</div>
<div>no data</div>
相关文章:
- 序列化数据属性中对象的最可靠方法
- jQuery最近父级的数据属性选择器
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 数据属性仅在切换设备模式下工作
- 函数jquery.html()不提供数据属性集值
- 在数据属性上进行下拉自动选择
- JavaScript-获取数据属性的值返回未定义的值
- 如何替换数据属性中的特定字符串单词
- 使用数据属性将HTML数据复制到另一个元素
- 带有CSS的数据属性就没那么有用了
- 查找所有TD标签并读取其数据属性
- 使用jQuery获取第N个元素的数据属性值
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 数据属性有没有更干净的方法
- 是否可以使用CSS分配数据属性
- 鼠标悬停的属性数据是什么
- 根据jquery数据属性值进行查询
- 使用jQuery在select选项上设置HTML数据属性
- 使用Javascript而不是html数据属性配置Parsley
- 语义UI下拉选项数据属性