174

カスタム データ属性: 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」を含むアラートを生成しますか?

4

6 に答える 6

154

を使用して、カスタム (または独自の) 属性の値を取得できます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 固有の属性とは何の関係もありません。

于 2010-03-09T22:56:50.787 に答える
141

はい、動作します。

IEはgetAttribute()、jQueryが内部で使用するIE4からサポートしてい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");
于 2011-04-17T21:12:45.400 に答える
9

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

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

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

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

この機能の現在のサポート状況について詳しくは、CanIUse.comを参照してください。

それが役立つことを願っています。

于 2011-06-28T13:59:27.303 に答える
7

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

この動作は、DOM 要素で expandoプロパティを false に設定することで無効にできます (デフォルトで true であるため、expandoプロパティはデフォルトで機能します)。

編集：URLを修正

于 2010-03-09T22:13:07.417 に答える
4

新しいブラウザーのデータセット プロパティのように、すべてのカスタム データ属性を一度に取得する場合は、次のようにします。これは私がやったことであり、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;
}
于 2013-08-30T20:14:37.427 に答える