9

当我出于某种原因无法访问 JQuery 时，我通常使用element.hasAttributeor手动执行属性选择element.getAttribute。

但是，这里似乎有些复杂，因为较旧的浏览器（IE <= 8）不支持hasAttribute. 所以如果要检查一个元素是否具有某个属性，就需要使用getAttribute并检查返回值。

if ((element.hasAttribute && element.hasAttribute("foo"))
    || (element.getAttribute("foo") != null))
{
  ....
}

这让我觉得你不妨完全忘记使用hasAttribute，而总是使用getAttribute. 问题是我找不到关于. getAttribute实际上，null如果该属性不存在，它会在大多数浏览器上返回 - 但它也可能返回空字符串，因为根据 DOM 3 规范它应该这样做。

不幸的是，返回一个空字符串让我们无法区分：

<div data-my-attribute = ""></div>

和

<div></div>

因此，在实践中 - 似乎最便携的事情是首先检查浏览器是否支持hasAttribute，如果不支持，则使用getAttribute- 因为 IE 6-8 实现getAttribute了如果属性不支持则返回null（而不是空字符串）存在。

这真的是最好的方法吗？或者有没有更好的方法来用纯 Javascript 编写跨浏览器属性检测？

4

2 回答 2

1

以下在 IE6-10（在 IETester 中测试过）、Firefox、Chrome 和 Safari 中运行良好：

function hasAttrib(element, attributeName) {
  return (typeof element.attributes[attributeName] != 'undefined');
}

这是jsfiddle及其独立的结果页面（用于在旧浏览器中进行测试）。

于 2013-06-14T20:40:15.540 回答
0

这可能需要进行一些测试，但是如果您尝试setAttribute一个它还没有的属性，那么描述Element的字符串的长度不会改变，如果您尝试它确实有一个属性，则保持不变？

var hasAttribute = (function () {
    if (HTMLElement && HTMLElement.prototype
                    && HTMLElement.prototype.hasAttribute)
        return function (node, attrib) { // use if available
            return node.hasAttribute(attrib);
        };
    return function (node, attrib) {
        var d = document.createElement('div'), // node for innerHTML
            e = node.cloneNode(false), // id attribute will be lost here
            i;
        if (attrib.toLowerCase() === 'id') return !!node.getAttribute('id');
        d.appendChild(e);
        i = d.innerHTML.length;                         // get original length
        e.setAttribute(attrib, e.getAttribute(attrib)); // set attrib to test
        return d.innerHTML.length === i;                // see if length changed
    };
}());
于 2013-06-14T17:05:50.927 回答