자바스크립트에서
css 추가하는 방법을 알아보겠습니다.
바로 코드 복사하실 분은
2번으로 >>
1. 자바스크립트 css 추가
document.getElementById(id).style.property = new style자바스크립트 css 추가 문법
갑자기 나오는 이 코드 한 줄이
당황스러우실 것 압니다.
하지만 기다려보세요.
제가 다 설명할 수 있어요.
-
이름
일단 앞쪽의 긴 뭉텅이는
너무 고민하실 것 없습니다.
이 부분은 css를 추가하고 싶은 곳을
알려주는 것으로
id 이름값을 적는다고 생각해주세요.
자바스크립트에서 id 값을 가져오려면
저런 식으로 길어져서 그렇지 어려운 부분은 아닙니다.
나중에 변수 안에 넣고
짧게 줄여서 사용할 수 있으니
너무 걱정하지 마세요.
-
css 값 넣기
style은 css의 스타일을 넣는 명령어입니다.
html에서도 비슷한 방법을 사용하니
이 부분은 넘어갈게요.
중간중간 .(온점)을 찍어
이어주는 것 잊지 말아 주세요.
문법이 조금이라도 틀리면 작동하지 않습니다.
prorerty 부분은
css의 속성을 넣어주면 됩니다.
예시로 쓰여있듯이
display, color 등등
추가하려는 css 속성을 넣습니다.
new style은
말 그대로 새로운 속성 값을 넣어주면 됩니다.
만약 display를 썼다면
속성 값으로는 block, inline, none 등등이 들어가겠죠?
여기서 주의할 점은
속성 값은 문자열이니
" "(따옴표)를 잊지 말아 주세요.
2. 자바스크립트 예시
document.getElementById("p2").style.color = "blue";예시
물론 이렇게 혼자만 따로 쓰면 안 되고요
위아래로 다른 코드들이 있겠지만
일단 한 줄만 보자고요.
예문을 만들면
위와 같은 코드가 됩니다.
Id값이 p2인 곳의 색을 파란색으로 바꿨군요.
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>전체적인 모양을 보자면
위의 코드처럼 볼 수 있습니다.
<html>
<body>
<p id="p2">Hello World!</p>
<script>
let p2 = document.getElementById("p2") // 변수처리
p2.style.color = "blue";
</script>
</body>
</html>그리고 위에서 말했던 것처럼
변수로 만들면
코드가 조금 더 깔끔해지죠.
3. W3Schools
https://www.w3schools.com/js/js_htmldom_css.asp
JavaScript DOM CSS
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
예문 확인해보기
그래도 잘 모르겠다!
괜찮습니다. 어려운 게 맞습니다.
제가 가져온 예문이 있는
w3schools 페이지 주소를 남겨둘 테니
실제로 어떻게 출력되는지 확인해보세요.
이해하는데 도움을 줄 것입니다.
이상으로 자바스크립트에서 css 추가하는 방법을 알아보았습니다.
도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.
질문도 편하게 남겨주세요!
[같이 보면 좋은 포스팅]
[coding/JavaScript] - 자바스크립트 선택자 querySeletor
자바스크립트 선택자 querySeletor
자바스크립트에서 요소를 어떻게 선택하는지 알아봅시다. 1. querySeletor document.querySelector("#main"); querySelector 도큐먼트. 즉, 브라우저 상의 요소. html의 요소를 선택할 때 document.querySelector..
ssimplay.tistory.com
[coding/JavaScript] - 스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기
스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기
스파르타 코딩 클럽 내일 배움 카드를 이용해 강의를 듣고 있습니다. (팝업창 관련 내용은 바로 2번으로 가주세요.) 1. 스파르타 코딩 클럽 후기 https://spartacodingclub.kr/ 스파르타코딩클럽 왕초보 8
ssimplay.tistory.com
그럼 이만.
총총.
'coding > JavaScript' 카테고리의 다른 글
| [자바스크립트] swiper 라이브러리 적용해보자 (34) | 2023.07.26 |
|---|---|
| 자바스크립트 class 추가하기 (24) | 2022.04.20 |
| 자바스크립트 선택자 querySeletor (28) | 2022.04.14 |
| 내일 배움단 스파르타 코딩 클럽 후기 + ajax 시작하기 (38) | 2022.03.04 |
| 스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기 (8) | 2022.02.25 |
