Attribute
DOM을 통해서 element에 있는 속성값을 반환, 설정 및 삭제가 가능하다.
| 속성 | 설명 |
| .attributes | 해당 요소의 속성들의 모음을 반환한다. |
| .getAttribute() | 해당 요소의 지정된 속성 값을 반환한다. |
| .hasAttribute() | 해당 요소에 지정된 속성이 있으면 true, 없으면 false |
| .hasAttributes() | 해당 요소에 속성이 있으면 true, 없으면 false |
| .removeAttribute() | 해당 요소에서 지정된 속성 제거 |
| .setAttribute() | 지정된 속성을 지정된 값으로 설정 또는 변경 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="chk" id="chk" style="background-color: lightblue;" checked>
<button></button>
<input type="text" name="inp" id="inp" placeholder="안녕하세요">
<script>
//.attributes를 통해서 #chk의 속성을 가져옴
console.log(document.querySelector("#chk").attributes);
//.getAttribute를 통해서 #chk의 style 속성을 가져옴
console.log(document.querySelector("#chk").getAttribute("style"));
//.hasAttribute를 통해서 #chk의 id값이 있는지 여부를 확인함
console.log(document.querySelector("#chk").hasAttribute(`id`));
//.hasAttributes를 통해서 button태그에 속성이 있는지 여부를 확인함
console.log(document.querySelector("button").hasAttributes());
//.removeAttribute를 통해서 #inp에 있는 placeholder 속성을 지움
document.querySelector("#inp").removeAttribute("placeholder");
//.setAttribute를 통해서 #inpt에 placeholder속성을 다시 설정함
document.querySelector("#inp").setAttribute("placeholder", "지우고 다시 작성한 Attribute");
</script>
</body>
</html>
Style
.style을 통하여 요소의 인라인 스타일에 접근하여 설정할 수 있다. 스타일 설정의 경우 3가지의 형태로 설정이 가능하다.
- cssText를 이용한 방식 : 요소.style.cssText
- setAttribute를 이용한 방식 : 요소.setAttribute("style", "css")
- style내의 property를 이용한 방식: 요소.style.스타일명
CSS에서 사용하는 스타일명이 background-color였다고 하면, JavaScript에서는 대쉬(-)를 빼고 대쉬 다음 글자를 대문자(backgroundColor)로 시작하여 적는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<p id="p1">안녕하세요</p>
<p id="p2">안녕하세요</p>
<p id="p3">안녕하세요</p>
<script>
document.querySelector("#p1").style.cssText = "color: blue; font-weight: bold";
document.querySelector("#p2").setAttribute("style", "color: red");
document.querySelector("#p3").style.fontStyle = "italic";
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : DOM에서 class를 설정해보자 (0) | 2024.07.29 |
|---|---|
| JavaScript : DOM의 이벤트를 설정해보자 (0) | 2024.07.29 |
| JavaScript : DOM을 통해 input 값 받아오기 (0) | 2024.07.29 |
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM에서 요소를 조작해보자 (0) | 2024.07.25 |
| JavaScript : DOM의 기본에 대하여 (0) | 2024.07.25 |
| JavaScript의 Spread 연산자에 대해 알아보자 (0) | 2024.07.24 |
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |