목록Javascript-DOM (4)

< Code diaries />

Javascript 로 CSS 변수 값 조절하기

Javascript에서 CSS 변수 다루는 방법을 한번 알아봅시다~  먼저, CSS 변수선언은 아래와 같이 보통 :root에 선언합니다.하위 선택자들이 모두 사용할 수 있도록 하기위함입니다.   1. CSS 내에 변수 선언하기, CSS에서 사용하기// 변수선언:root { --primary : tomato; } // 변수의 값을 사용할때에는 var() css메소드 사용 .wrap { color:var(--primary) }   2. Javascript에서 CSS의 변수값을 가져오기const docs = document.documentElement; const value = getComputedStyle(docs).getPropertyValue('--primary') console.log(value..
Javascript-DOM/03 - CSS 다루기 2024. 6. 7. 11:57
Javascript 로 CSS 속성 가져오기, 수정하기

오늘은 javascript에서 css 속성을 어떻게 다루는지,어떤 명령어들이 있는지 한 번 정리해 보려고 해요.궁금하신 점은 답글에 남겨주세요  Hello World 1. style 속성을 이용하여 태그의 css를 변경하기h1.style.backgroundColor = 'tomato';h1.style.fontSize = '12px';h1.style.border = '1px solid olive';String 형식으로 들어갈 때에 따옴표안에 세미콜론(;)을 적지 않도록 주의하자.2. cssText 속성을 이용하여 여러 css를 한번에 수정하기.h1.style.cssText = 'font-size:20px; color:blue'; 3. cssText 속성을 이용하여 요소에 들어있는 css 속성 가져오기con..
Javascript-DOM/03 - CSS 다루기 2024. 6. 4. 08:50
Javascript로 html 요소의 컨텐츠 가져오기, 수정하기(innerHTML, textContent, innerText)

오늘은 javascript에서 어떻게 HTML 요소의 값을 다루는지 살펴보아요~렛츠가.. 기릿입니다... (흐흐흐 아시는분은 다 아시는 구호죠? 돌비채널 팬이라.. )아래의 간단한 HTML 마크업으로 한번 해 봅시다~See My fruite 토마토 INIT - 먼저 html 요소를 변수에 담아옵니다.const title = document.querySelector('.title');const img = document.querySelector('.thumb img');const caption = document.querySelector('.thumb figcaption');  Property ListPropertytypedescriptiontextContentNodescript, style 적..
Javascript-DOM/02 - DOM 다루기 2024. 6. 2. 22:27
Javascript로 DOM 접근하기

따라란~~오늘부터는 Javascript에서 Dom을 다루는 다양한 방법들을 정리해 보려고 합니다. Javascript 에서 HTML 요소를 조작하기 위하여는 일단 접근을 해야합니다.자주사용하는 방법을 공부해 봅시다~! ^^모든 접근하는 명령어는 문서 하단의 MDN 사이트에서 참조하시면 됩니다. Hello DOMNice to meet you~Hello JavaScriptGood morning Everyone   1. ID 명으로 접근하기const h1 = document.getElementById('h1');  2. querySelector 로 접근하기const title = document.querySelector('.title'); 이경우 예제에서 클래스 'title'은 2개 이지만, 첫번째로 찾은 태..
Javascript-DOM/02 - DOM 다루기 2024. 6. 2. 13:56
이전 Prev 1 Next 다음