9

なんらかの理由で JQuery にアクセスできないときは、通常、element.hasAttributeまたはを使用して手動で属性を選択しelement.getAttributeます。

ただし、古いブラウザ (IE <= 8) はhasAttribute. したがって、要素に特定の属性があるかどうかを確認したい場合はgetAttribute、戻り値を使用して確認する必要があります。

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

これにより、 を使用することをまったく忘れてhasAttribute、常にgetAttribute. 問題は、 の戻り値に関する一貫したドキュメントが見つからないことですgetAttribute。実際にはnull、属性が存在しない場合、ほとんどのブラウザーで返されますが、空の stringが返されることもあります。これは、DOM 3 仕様に従って行うことになっているためです。

残念ながら、空の文字列を返すと、次のあいまいさを解消する方法がなくなります。

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

と

<div></div>

hasAttributeしたがって、実際には、ブラウザが をサポートしているかどうかを最初に確認し、サポートしていない場合は使用するのが最も移植性の高い方法のgetAttributeよう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しようとした場合に変更されますか?

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 に答える