有没有一种原生的方法,没有jQuery,来检查dom元素是否具有所选值的属性。举例来说:
//assume doc has data-mod="do" defined
这将是真实的:document.hasAttribute('data-mod');但这将是假的:document.hasAttribute('data-mod="do"')有没有办法在DOM元素上用这个值来本地检查数据属性?
document.hasAttribute('data-mod');
document.hasAttribute('data-mod="do"')
hts6caw31#
您必须通过getAttribute访问属性的值,并将其与预期的字符串进行比较:
getAttribute
if (node.getAttribute('data-mod') === 'do') { ... }
对于现代浏览器,您可以使用matches:
matches
if (node.matches('[data-mod="do"]')) { ... }
.或者对于[data-*]属性,您可以使用dataset:
[data-*]
dataset
if (node.dataset.mod === 'do') { ... }
2ekbmq322#
你可以用dataset来做,
if (elementNode.dataset['mod'] == 'do') { //your code goes here. }
通过使用dataset,您可以轻松访问元素的数据属性。
eanckbw93#
是的,就是这样:
var selector = document.getElementsByTagName("H1")[0]; //Example of an h1 if (selector.getAttribute('data-mod') == "do"){ //Do your logic }
7uzetpgm4#
这可能有用...
var list = document.querySelectorAll('[data-mod="do"]');
5jvtdoz25#
可以使用Element.attributes
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>
5条答案
按热度按时间hts6caw31#
您必须通过
getAttribute
访问属性的值,并将其与预期的字符串进行比较:对于现代浏览器,您可以使用
matches
:.或者对于
[data-*]
属性,您可以使用dataset
:2ekbmq322#
你可以用
dataset
来做,通过使用
dataset
,您可以轻松访问元素的数据属性。eanckbw93#
是的,就是这样:
7uzetpgm4#
这可能有用...
5jvtdoz25#
可以使用
Element.attributes