H5에서 사용자 정의 속성을 가져오고 설정하는 방법

요소 속성 사용자 정의는 HTML5에 추가된 새로운 기능입니다. 간단히 말해서, 사용자 정의 데이터 속성 사양은 data-로 시작하는 모든 속성 이름에 값을 할당해야 함을 지정합니다. 사용자 정의 데이터 속성은 페이지 또는 애플리케이션의 개인 사용자 정의 데이터를 저장하는 데 사용되며 DOM에 저장되며 전체 DOM의 레이아웃 및 성능에 영향을 미치지 않습니다. 전체 웹페이지 표현 효과.
예를 들어 객체를 통해 특정 지역의 모든 도시를 가져오지만 다음 작업을 용이하게 하려면 도시에 대한 다른 정보도 가져와야 합니다. 이를 위해 이 도시의 레이블에 사용자 정의 속성을 추가할 수 있습니다. 이 영역의 다른 정보는 작업 중에 설정한 속성 이름을 통해 직접 값을 얻을 수 있으며, 이는 우리와 컴퓨터의 작업량을 크게 늘릴 수 있습니다.
속성에 값을 저장할 때 문자열이어야 한다는 점에 유의하세요. 저장될 데이터가 객체인 경우 문자열로 변환해야 합니다.

var cityStr = JSON.stringify(cityObj);

JQ는 데이터 속성 값을 얻고 설정하는 두 가지 방법을 제공합니다. attr() 및 data()
매개변수가 하나만 전달되는 경우 이 매개변수는 속성 이름이며 속성 값을 가져오는 데 사용됩니다. 두 개의 매개변수를 전달하면 속성 이름과 속성 값이 설정됩니다.

 $(selector).attr(attribute,value)

다음은 데이터를 사용하여 사용자 정의 속성에 액세스하는 작은 사례입니다.

<p id="box1"></p><button id="btn1">click1</button><button id="btn2">click2</button></body><script src="../assets/jquery-1.9.1.min.js"></script><script>
    //点击click1向box添加属性student，属性值为tom
    $("#btn1").click(function () {
        $("#box1").data("student","tom")
    });    //通过属性名获取属性值
    $("#btn2").click(function () {
        alert($("#box1").data("student"));
    });</script>

attr을 사용하여 동일한 효과를 얻으세요

<script>
    $("#btn").click(function () {
        $("#box1").attr("data-student","tom")
    });
    $("#btn2").click(function () {
        alert($("#box1").attr("data-student"));
    });</script>

개발자를 통해 할 수 있습니다 저장 버튼(click1)을 클릭하면 사용자 정의 속성이 자동으로 box1에 추가된다는 것을 도구에서 확인하세요. 데이터 메서드를 사용하여 추가하면 여기에 data-student="tom"이 표시되지 않으며 계속 사용할 수 있습니다. 그 값은 "tom"이며 둘 사이에는 큰 차이가 없으며 단지 다른 방식으로 인용될 뿐입니다. 속성 이름 앞에
data-를 추가하는 것은 H5 표준 작성 방법이므로 추가하는 것이 가장 좋습니다.

여기서

1. 사용자 정의 속성 이름은 시스템 속성 이름과 동일할 수 없습니다(예: 클래스, 이름...).
2. 모든 속성 값은 문자열만 될 수 있습니다. 정의
3. HTML5에서는 요소의 데이터 속성을 맞춤설정할 때 속성 이름이 data-로 시작하지만 실제 속성 이름에는 data-

가 포함되지 않는다고 규정합니다.

위 내용은 H5에서 사용자 정의 속성을 가져오고 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!