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

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);

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

참고 URL : https://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6