sourcetip

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

fileupload 2023. 11. 4. 13:14
반응형

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">

다음과 같은 자바스크립트를 실행할 것입니다.

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

IE 6에서 "goff de deoff"가 포함된 경보를 생성할 수 있습니까?

다음을 사용하여 사용자 지정(또는 사용자 고유) 특성 값을 검색할 수 있습니다.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's를 사용할 수 있습니다..data()메서드 또는 일반 바닐라 자바스크립트:

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 Data Attribute 기능을 지원하지 않을 뿐만 아니라, 사실상 현재 브라우저가 지원하지 않습니다!현재 유일한 예외는 크롬입니다.

당신은 자유롭게 사용할 수 있습니다.data-geoff="geoff de geoff"속성으로, 그러나 현재 브라우저 버전의 Chrome만이 당신에게 제공할 것입니다..dataGeoff소유물.

다행히 IE6를 포함한 모든 현재 브라우저는 표준 DOM을 사용하여 알려지지 않은 속성을 참조할 수 있습니다..getAttribute()메소드 그래서.getAttribute("data-geoff")어디서든 통할 겁니다

가까운 미래에 Firefox와 Safari의 새로운 버전이 데이터 속성을 지원하기 시작할 것입니다. 하지만 모든 브라우저에서 작동하는 완벽하게 좋은 액세스 방법이 있기 때문에 일부 방문자에게만 적용되는 HTML5 방법을 사용할 이유가 없습니다.

이 기능의 현재 지원 상태에 대한 자세한 내용은 Can에서 확인할 수 있습니다.IUse.com .

도움이 되길 바랍니다.

IE는 항상 이를 지원해왔고(적어도 IE4부터는) JS에서 액세스할 수 있다고 생각합니다.그것들은 '확장 속성'이라고 불렸습니다.오래된 MSDN 문서 참조

이 동작은 DOM 요소에서 expando 속성을 false로 설정하여 비활성화할 수 있습니다(기본적으로 true이므로 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);

코딩으로 한번 해보세요.

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

반응형