web-dev-qa-db-ja.com

HTML5カスタムデータ属性はIE 6で「機能」しますか？

カスタムデータ属性： 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);

IE 6に「geoff de geoff」を含むアラートを生成しますか？

javascriptinternet-explorerhtml5internet-explorer-6custom-data-attribute
173
Paul D. Waite

getAttributeを使用して、カスタム（または独自の）属性の値を取得できます。あなたの例に従って

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

を使用してdata-geoffの値を取得できます

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

MSDN を参照してください。そして、これを機能させるにはIE7が必要だと言われていますが、IE6でこれを少し前にテストし、正常に機能しました（互換モードでも）。

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

153
Marcel Korpel

はい、動作します。

IEはIE4のgetAttribute()をサポートしています。これはjQueryがdata()で内部的に使用するものです。

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

したがって、jQueryの.data()メソッドまたは単純なVanilla 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");
142
Marko

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

data-geoff="geoff de geoff"を属性として使用することは完全に自由ですが、現在のブラウザバージョンのChromeのみが.dataGeoffプロパティを提供します。

幸いなことに、allIE6を含む現在のブラウザは、標準のDOM .getAttribute()メソッドを使用して未知の属性を参照できるため、.getAttribute("data-geoff")が機能します。どこにでも。

近い将来、FirefoxとSafariの新しいバージョンがデータ属性のサポートを開始しますが、すべてのブラウザで機能する完全に優れたアクセス方法があるため、HTML5メソッドを使用する理由はまったくありません。一部の訪問者に対してのみ機能します。

CanIUse.com で、この機能のサポートの現在の状態に関する詳細を確認できます。

お役に立てば幸いです。

9
Spudley

IEは常にこれをサポートしており（少なくともIE4以降）、JSからアクセスできると思います。それらは「エキスパンドプロパティ」と呼ばれていました。 MSDNの古い記事 を参照してください

この動作は、DOM要素でexpandopropertyをfalseに設定することで無効にできます（デフォルトではtrueなので、expandopropertiesはデフォルトで機能します）。

編集：URLを修正しました

7
Timores

新しいブラウザのデータセットプロパティのように、すべてのカスタムデータ属性を一度に取得する場合は、次の操作を実行できます。これは私がやったことであり、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;
}
4
user1767210

IE6では、動作しない場合があります。参考： MSDN

JQueryを使用してほとんどの場合を処理することをお勧めします。

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

コーディングでこれを試してください。

0
HTML5 developer