うHTML5カスタムデータ属性は"仕事"IE6?

StackOverflow https://stackoverflow.com/questions/2412947

質問

カスタムデータ属性: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

"と言うと"仕事"とは、いったHTMLのようになります:

<div id="geoff" data-geoff="geoff de geoff">

は、以下のようなJavaScript:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

生産は、IE6と、アラートの"ヤドゥヤー"です。

役に立ちましたか？

解決

カスタム（またはあなた自身）の値を取得することができgetAttributeを使用して属性。あなたの例を次の

<div id="geoff" data-geoff="geoff de geoff">

私が使用してdata-geoffの値を取得することができます。

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

MSDN のを参照してください。あなたがこの作業を取得するためにIE7が必要であることが挙げているが、私はIE6でしばらく前にこれをテストし、それが（でもQuirksモードで）正しく機能します。

しかし、これはもちろん、HTML5固有の属性とは何の関係もありません。

他のヒント

になっているのです。

IEを支援して getAttribute() からIE4はjQueryを使用することを data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

そのどちらも使用可能でjQueryの .data() 方法は普通のバニラJavaScript:

サンプルHTML

<div id="some-data" data-name="Tom"></div>

Javascript

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

var name = $("#some-data").data("name");

だけでなく、IE6は、HTML5のデータをサポートしていません。実際には、事実上、の無の現在のブラウザがそれらをサポートし、機能を属性！現時点では唯一の例外はクロームです。

あなたは属性としてdata-geoff="geoff de geoff"を使用するために自由に完璧ですが、唯一の現在のブラウザのバージョンのChromeはあなたに.dataGeoff性を付与されます。

幸い、のすべてのの現在のブラウザ - IE6を含む - は、標準のDOM .getAttribute()方法を使用して、未知の属性を参照することができますので、.getAttribute("data-geoff")はどこでも動作します。

。

非常に近い将来には、FirefoxとSafariの新バージョンでは、データ属性をサポートするために開始しますが、すべてのブラウザで動作してaccessessingのに最適な方法がありますことを考えると、その後、HTML5を使用してすべき理由は本当にありません唯一のあなたの訪問者のいくつかのために動作します。

方法

あなたは CanIUse.com のでは、この機能のサポートの現在の状態についての詳細を見ることができます。

希望に役立ちます。

私はIEが常に（少なくともIE4から始まる）、これをサポートしてきたと思うと、あなたはJSからそれらにアクセスすることができます。彼らは、「はExpandoプロパティ」と呼ばれました。 古いMSDNの記事を参照してください。

この動作は、（それがデフォルトでtrueですので、Expandoでのプロパティはデフォルトでの作業）DOM要素にfalseにはExpando のプロパティの設定で無効にすることができます。

編集：URLを固定

カスタムデータのすべてが新しいブラウザでデータセットのプロパティのように一度に属性を取得したい場合は、

は、次の操作を行うことができます。これは私がやったことで、IE7の+に私のために素晴らしい作品ます。

function getDataSet(node) {
    var dataset = {};
    var attrs = node.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs.item(i);
        // make sure it is a data attribute
        if(attr.nodeName.match(new RegExp(/^data-/))) {
            // remove the 'data-' from the string 
            dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
        }
    }
    return dataset;
}

に IE6, でうまく動かない場合もあります。参考： MSDN

私はjQueryを使ったほとんどの場合:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

うお符号といいます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top