관련글
DOM 요소에 속성 추가하기
다음과 같이 원하는 속성을 요소에 추가시킬 수 있습니다. 여기서는 data-value라는 임의의 속성에 10 이라는 값을 추가시켰습니다.
'data-' 로 시작하는 속성은 HTML5 표준에서 요소에 원하는 값을 저장하고 싶은 경우 사용하는 속성입니다. jQuery에서 속성을 추가하고 싶은 경우에는 attr(속성명, 속성값) 이라는 메서드를 사용합니다.
|
<script>
$(document).ready(function () {
$('span').attr('data-value', 10);
});
</script> |
cs |
속성 여러개 동시에 추가하기
속성을 동시에 여러개 추가할 때에는 attr(객체) 메서드를 사용해 객체를 넘겨주어 동시에 여러 속성을 추가할 수 있습니다.
|
<script>
$(document).ready(function () {
var attrObj = {
'data-value': 10,
'data-value2': 20,
'data-value3': 30
};
$('span').attr(attrObj);
});
</script> |
cs |
넘겨준 객체의 속성과 값들이 그대로 요소에 추가되었습니다.
속성 값 가져오기
특정 속성의 값을 얻어야 할 때에는 attr(속성명) 메서드를 사용합니다.
다음과 같이 attr()메서드에 특정 속성명을 지정하면 해당 속성의 값이 리턴됩니다.
|
<script>
$(document).ready(function () {
var dataValue = $('span').attr('data-value'); //10이 리턴됩니다.
});
</script> |
cs |
DOM 요소에 속성값 수정하기
또한 attr() 메서드는 속성 추가 뿐만 아니라 수정도 가능한데, 지정한 속성이 존재하지 않는 경우에는 추가이고 존재하는 속성인 경우에는 지정한 값으로 수정됩니다. 따라서 수정은 추가와 마찬가지로 attr(속성명, 속성값) 메서드를 사용합니다.
|
<script>
$(document).ready(function () {
$('span').attr('data-value', 10);
});
</script> |
cs |
DOM 요소에 속성 제거하기
반대로 원하는 속성을 제거하고 싶을 수 있습니다. 속성을 제거할 때에는 removeAttr(속성명) 메서드를 사용합니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('span').removeAttr('data-value');
});
</script>
</head>
<body>
<span data-value="10"></span>
</body>
</html> |
cs |
span 태그에 있던 data-value 속성이 제거되었습니다.
'JavaScript' 카테고리의 다른 글
| [jQuery] jQuery text(), html() 메서드 설명 및 차이점 (0) | 2018.06.25 |
|---|---|
| [jQuery] jQuery 스타일(style CSS) 다루기 (0) | 2018.06.25 |
| [jQuery] jQuery DOM 계층 구조를 이용한 선택자 메서드 (0) | 2018.06.24 |
| [jQuery] jQuery 요소에 클래스(class) 추가 및 삭제하기 (0) | 2018.06.24 |
| [jQuery] jQuery 선택자(Selector) 필터 총정리 (0) | 2018.06.23 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그