jquery JS hasAttribute带有data属性值

mm9b1k5b  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(192)

有没有一种原生的方法,没有jQuery,来检查dom元素是否具有所选值的属性。举例来说:

  1. //assume doc has
  2. data-mod="do" defined

这将是真实的:
document.hasAttribute('data-mod');
但这将是假的:
document.hasAttribute('data-mod="do"')
有没有办法在DOM元素上用这个值来本地检查数据属性?

hts6caw3

hts6caw31#

您必须通过getAttribute访问属性的值,并将其与预期的字符串进行比较:

  1. if (node.getAttribute('data-mod') === 'do') {
  2. ...
  3. }

对于现代浏览器,您可以使用matches

  1. if (node.matches('[data-mod="do"]')) {
  2. ...
  3. }

.或者对于[data-*]属性,您可以使用dataset

  1. if (node.dataset.mod === 'do') {
  2. ...
  3. }
展开查看全部
2ekbmq32

2ekbmq322#

你可以用dataset来做,

  1. if (elementNode.dataset['mod'] == 'do') {
  2. //your code goes here.
  3. }

通过使用dataset,您可以轻松访问元素的数据属性。

eanckbw9

eanckbw93#

是的,就是这样:

  1. var selector = document.getElementsByTagName("H1")[0]; //Example of an h1
  2. if (selector.getAttribute('data-mod') == "do"){
  3. //Do your logic
  4. }
7uzetpgm

7uzetpgm4#

这可能有用...

  1. var list = document.querySelectorAll('[data-mod="do"]');
5jvtdoz2

5jvtdoz25#

可以使用Element.attributes

  1. function data(el, dataName, dataValue) {
  2. for (var i = 0; i < el.attributes.length; i++) {
  3. if (/^(data)(?=-\w+|=[^=]*$|=$|$)/g.test(el.attributes[i].name)) {
  4. if (dataName && el.attributes[i].name === "data-" + dataName) {
  5. if (dataName && dataValue
  6. && el.attributes[i].name === "data-" + dataName
  7. && el.attributes[i].value === dataValue) {
  8. return true
  9. }
  10. return true
  11. } else {
  12. return true
  13. }
  14. }
  15. }
  16. return false
  17. }
  18. var elems = document.querySelectorAll("div");
  19. for (var i = 0; i < elems.length; i++) {
  20. console.log(data(elems[i]))
  21. }
  22. var _name = "prop", _value = "123";
  23. console.log("element #"
  24. + elems[1].id
  25. +" has `data-*` attribute name:"
  26. +_name
  27. +", value:"+_value
  28. , data(elems[1], _name, _value))
  1. <div data="abc">abc</div>
  2. <div id="prop" data-prop="123">123</div>
  3. <div>no data</div>
展开查看全部

相关问题