IE 5에서 HTML5 사용자 정의 데이터 속성이 "작동"합니까?

맞춤 데이터 속성 : 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"가 포함 된 경고를 생성합니까?

을 사용하여 사용자 정의 (또는 고유 한) 속성 값을 검색 할 수 있습니다 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 특정 속성과 관련이 없습니다.

그렇습니다.

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>

자바 스크립트

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

jQuery

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

IE6는 HTML5 데이터 속성 기능을 지원하지 않을뿐만 아니라 실제로 는 현재 브라우저에서 지원 하지 않습니다 ! 현재 유일한 예외는 Chrome입니다.

귀하는 data-geoff="geoff de geoff"속성 으로 사용할 자유가 있지만 현재 브라우저 버전의 Chrome 만 해당 속성을 제공합니다 .dataGeoff.

다행히도 IE6을 포함한 모든 현재 브라우저는 표준 DOM .getAttribute()방법을 사용하여 알 수없는 속성을 참조 할 수 있으므로 .getAttribute("data-geoff")어디에서나 작동합니다.

머지 않아 새로운 버전의 Firefox 및 Safari는 데이터 속성을 지원하기 시작하지만 모든 브라우저에서 작동하는 완벽한 액세스 방법이 있다고 가정하면 HTML5 방법을 사용할 이유가 없습니다. 일부 방문자 만 사용할 수 있습니다.

CanIUse.com 에서이 기능에 대한 현재 지원 상태에 대한 자세한 내용을 볼 수 있습니다 .

희망이 도움이됩니다.

IE는 항상 (적어도 IE4에서 시작하여) 이것을 지원했으며 JS에서 액세스 할 수 있다고 생각합니다. 이를 '확장 속성'이라고했습니다. 참조 된 MSDN 문서를

DOM 요소 에서 expando 속성 을 false 로 설정하면이 동작을 비활성화 할 수 있습니다 (기본적으로 true이므로 expando 속성 이 기본적으로 작동 함).

편집 : URL을 수정

최신 브라우저의 dataset 속성과 같은 모든 사용자 지정 데이터 특성을 한 번에 검색하려는 경우 다음을 수행 할 수 있습니다. 이것이 내가 한 일이며 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);

코딩에서 이것을 시도하십시오.