-
280920 #003 jQuery : Style / AttributejQuery 2020. 9. 28. 09:41
Attribute
Property
차이 비교
body
<body> <a href="#hello" id="a">링크#hello</a> <br> <input type="checkbox" id="checked" checked="checked"> <br> <input type="checkbox" id="unchecked" > <br> <img id="sample_img" src="./images/stuoy_nuki1.png" width="200px" data-userattr1="사용자지정속성값" data-userattr2="123456789"> <br> </body>
var attr_img_src = $("#sample_img").attr("src"); var prop_img_src = $("#sample_img").prop("src"); console.log(attr_img_src); console.log(prop_img_src);
결과값 var attr_img_width = $("#sample_img").attr("width"); var prop_img_width = $("#sample_img").prop("width"); console.log(attr_img_width); console.log(prop_img_width);
결과값 var attr_href = $("#a").attr("href"); var prop_href = $("#a").prop("href"); console.log(attr_href); console.log(prop_href); //사용자 파일 경로
결과값 var attr_checked = $("#checked").attr("checked"); var prop_checked = $("#checked").prop("checked"); console.log(attr_checked); console.log(prop_checked); var attr_unchecked = $("#unchecked").attr("checked"); var prop_unchecked = $("#unchecked").prop("checked"); console.log(attr_unchecked); console.log(prop_unchecked);
결과값 var userAttr1 = $("#sample_img").data("userattr1"); var userAttr2 = $("#sample_img").data("userattr2"); console.log(userAttr1); console.log(userAttr2);
결과값
속성 변경하기
$(function(){ $("<button id='btnModify'>modify the attr</button>").appendTo($("body")); $("#btnModify").click(function(){ $("#sample_img").attr("src", "./images/stuoy_black.jpg") $("#checked").prop("checked", false); $("#unchecked").prop("checked", true); }) })
#checked - checked 
#unchecked - checked 'jQuery' 카테고리의 다른 글
250920 #002 jQuery - node (0) 2020.09.25