Question

我试图学习如何使用本机JavaScript而不依赖于jQuery。我想获得元素上特定属性的值。如何在不使用jQuery的情况下执行此操作？如果浏览器之间存在不一致之处，请提及它们。

＆＃13;

myImage = document.getElementById("logo");
console.log('myImage src attribute value');
console.log('myImage data-foo attribute value');

＆＃13;

<img id="logo" src="logo.png" data-foo="bar">

＆＃13;

Answer 1

使用.getAttribute()评估价值。

myImage = document.getElementById("logo");
console.log(myImage.getAttribute('src'));
console.log(myImage.getAttribute('data-foo'));

<img id="logo" src="http://placehold.it/500x500" data-foo="bar">

对于HTML5 data-属性，您仍然可以使用传统方法进行访问，甚至可以使用.dataset（但只能使用HTML5-compliant browsers），即：.dataset.foo：< / p>

myImage = document.getElementById("logo");
console.log(myImage.getAttribute('src'));
console.log(myImage.dataset.foo);

<img id="logo" src="http://placehold.it/500x500" data-foo="bar">

Answer 2