HTML 요소에서 데이터 속성을 설정하는 방법

HTML 요소에서 데이터 속성을 설정하는 방법

나는 속성을 가진 div를 가지고 있습니다.data-myval = "10"값을 업데이트하고 싶습니다. 사용하면 변경되지 않습니까?div.data('myval',20)사용해야 합니까?div.attr('data-myval','20')오직?

제가 HTML5와 jQuery를 혼동하고 있나요?조언 부탁드립니다.감사합니다!

편집: 업데이트됨div.data('myval')=20로.div.data('myval',20)하지만 HTML은 여전히 업데이트되지 않습니다.

HTML

<div id="mydiv" data-myval="10"></div>

제이에스

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

데모

언급

참조에서:

jQuery 자체는 다음을 사용합니다..data()'method' 및 'method'라는 이름으로 정보를 저장하고 내부에서 사용할 수 있도록 밑줄('_')로 시작하는 모든 데이터 이름을 예약합니다.

참고로 jQuery의data()변경되지 않습니다.data속성을 입력합니다.

그래서, 만약 당신이 바꿀 필요가 있다면,dataHTML의 속성, 당신은 사용해야 합니다..attr()대신.

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

​jQuery:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

이 데모 보기

바닐라 자바스크립트 솔루션

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

• DOM의 속성 사용

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
  

• JavaScript 속성 사용

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute
  

다음을 사용할 수도 있습니다.attr물건;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

대본

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

OR

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

jQuery를 참고하시기 바랍니다..data()html5를 변경할 때 업데이트되지 않습니다.data-Javascript를 사용하는 특성입니다.

jQuery를 사용하는 경우.data()설정하는data-HTML 요소의 속성 jQuery를 사용하는 것이 좋습니다..data()그것들을 읽는 것.그렇지 않으면 속성을 동적으로 업데이트할 경우 불일치가 발생할 수 있습니다.예를 들어, 을 참조하십시오.setAttribute(),dataset(),attr()아래. 값을 변경하고 버튼을 여러 번 누르면 콘솔이 표시됩니다.

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

jQuery와 DOM의 동기화를 유지하기 위한 간단한 옵션은

$('#mydiv').data('myval',20).attr('data-myval',20);        

jQuery를 사용하는 경우.data():

div.data('myval', 20);

임의의 데이터를 저장할 수 있습니다..data()하지만 사용할 때는 문자열로만 제한됩니다..attr().

[jQuery] .data() vs.attr() vs.extend()

jQuery 메서드.data()메서드를 사용하여 jQuery에서 관리하는 내부 개체를 업데이트합니다.

업데이트를 원하는 경우data-attributes약간의 스프레드를 사용하여 --

$('body').attr({ 'data-test': 'text' });

그렇지 않으면,$('body').attr('data-test', 'text');잘 될 겁니다.

이를 달성할 수 있는 또 다른 방법은 --

$.extend( $('body')[0].dataset, { datum: true } );

속성 변경을 다음으로 제한합니다.HTMLElement.prototype.dataset추가적인 것은 아닙니다.

데이터 속성을 설정하는 또 다른 방법은 데이터 집합 속성을 사용하는 것입니다.

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

언급URL : https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements