有没有一种原生的方法,没有jQuery,来检查dom元素是否具有所选值的属性。举例来说:
//assume doc hasdata-mod="do" defined
//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') { ...}
if (node.getAttribute('data-mod') === 'do') {
...
}
对于现代浏览器,您可以使用matches:
matches
if (node.matches('[data-mod="do"]')) { ...}
if (node.matches('[data-mod="do"]')) {
.或者对于[data-*]属性,您可以使用dataset:
[data-*]
dataset
if (node.dataset.mod === 'do') { ...}
if (node.dataset.mod === 'do') {
2ekbmq322#
你可以用dataset来做,
if (elementNode.dataset['mod'] == 'do') { //your code goes here.}
if (elementNode.dataset['mod'] == 'do') {
//your code goes here.
通过使用dataset,您可以轻松访问元素的数据属性。
eanckbw93#
是的,就是这样:
var selector = document.getElementsByTagName("H1")[0]; //Example of an h1if (selector.getAttribute('data-mod') == "do"){ //Do your logic}
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))
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
} else {
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>
<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