JS) 자바스크립트에서 스타일 바꾸기

카테고리 : 웹 프로그래밍/HTML 2020. 6. 8. 07:22

자바스크립트에서 스타일을 바꾸는 행위는 속도에 영향을 줄 수 있으므로 권장하지 않습니다.

CSS로 가능한경우 무조건 CSS를 이용해주세요

 

특히 계속 변화시키는 경우

예시 : resize 이벤트에서 특정 width , height를 계속 수정

(만약, CSS설정으로 동일하게 가능한데, JS로 처리시 느립니다. 과정이 더 복잡하기 때문인데요. 이로인해 사이트 렉을 유발할 수 있습니다.)

 

DOM의 객체를 선택하는 방법은 여러 가지입니다.

  • document.getElementById(아이디)
  • document.getElementsByClassName(클래스)
  • document.getElementsByTagName(태그 이름 : 'h1', 'div' 등)
  • document.getElementsByName(이름 : name)
  • document.querySelector(CSS선택자 : 'header > a')
  • document.querySelectorAll(CSS선택자 : 'header a')

 

(객체 선택). style을 통해 스타일 편집이 가능합니다.

(객체 선택).style.display : CSS display와 동일

var a = (객체 선택).style.display;

a 에는 선택된 객체의 display 값이 들어갑니다.

주의사항 : html의 인라인 요소 style에 들어가 있는 값만 반환합니다.

<div id="style_test_hi098123" style="color:#555">Hello HI</div>
<style>
    #style_test_hi098123 { float : right }
</style>

document.getElementById('style_test_hi098123').style.float // 반환 값 없음
document.getElementById('style_test_hi098123').style.color // 반환 값 : "#555" 또는 rgb(85, 85, 85)

 

주로 쓰이는 방법인 아이디 방법을 활용해서 안내해드리겠습니다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="style_test_hi098123">
        Hello HI
    </div>
    <script>
		document.getElementById('style_test_hi098123').style.margin='20px';
    </script>
</body>
</html>

이렇게 코드 작성 시 margin이 20px이 적용된 걸 확인할 수 있습니다.

 

아래와 같이 작성한 경우 값을 반환할 수 있습니다.

위의 주의사항 안내와 같이 inline style이 아닌 float 값은 반환할 수 없습니다.

HTML inline style

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="style_test_hi098123" style="color:#555">
	    Hello HI
	</div>
	<style>
	    #style_test_hi098123 { float : right }
	</style>
    <script>
		console.log(document.getElementById('style_test_hi098123').style.color)
		console.log(document.getElementById('style_test_hi098123').style.float)
    </script>
</body>
</html>

결과 페이지

 

이와 같이 모든 CSS값을 적용하고 반환 가능하다.

다만 몇 가지 규칙이 있다.

 

1. CSS에 "-"가 있는 경우

예를 들어 margin-top, border-radius 등은

marginTop, borderRadius로

 

-(소문자 1글자)를 대문자 1글자로 변환한 이름을 사용한다.

 

예시 코드

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="style_test_hi098123" style="color:#555">
	    Hello HI
	</div>
	<style>
	    #style_test_hi098123 { float : right }
	</style>
    <script>
		document.getElementById('style_test_hi098123').style.marginTop="20px"
    </script>
</body>
</html>

결과

 

2. 단위에는 px, em, % 등 단위를 꼭 붙여야 된다.

만약 조금 전의 코드에서

document.getElementById('style_test_hi098123').style.marginTop="20" 이라고 작성 시 작동하지 않는다.

 

3. :hover, :after, :before 등은 style 을 만들어서 html의 끝에 붙여넣는 방법을 이용할 수 있다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="style_test_hi098123" style="color:#555">
	    Hello HI
	</div>
	<style>
	    #style_test_hi098123 { float : right }
	</style>
    <script>
		var s=document.createElement('style');
        s.innerHTML="#style_test_hi098123:hover{ color: #fff; background-color:#333 }";
        document.body.appendChild(s);
    </script>
</body>
</html>

마우스를 올린 상태

hover : 마우스가 올려졌을때를 의미한다.

마우스가 올려졌을 때 글자는 하얗게(#fff), 배경은 어둡게(#333)으로 설정했다.

근데 글자 하얗게 적용이 안된다.

 

이유는?

style의 우선순위에 따라 여러 값이 있는 경우 순위에 따라 결정되기 때문

 

 

두번째, 스타일 변경방법

var hi098123_style = document.createElement('style');
hi098123_style.innerHTML="h1{font-size:2em;color:#333} a{color:#eee;}";
document.head.appendChild(hi098123_style);

스타일 태그를 생성하여 head에 추가한 코드입니다.

 

<style> 태그 안의 내용 : innerHTML로 설정하고

head.appendChild 를 이용하여 만든 객체를 넣습니다.

 

 

추가 주의점 : style의 우선순위는 아래와 같다.

  1. !important
    • #hi098123{color:#333 !important}
  2. inline-style
    • html 안에 있는 style="color:#555" 와 같은 값
  3. 부모자식으로 연결된경우
    • .parent_class > #hi098123
    • #parent_id .hi098123
    • div #hi098123 등
  4. #id
    • #hi098123
  5. .class, :
    • .hi098123
    • #id:hover 등
  6. tag
    • div
    • p
    • h1 등
  7. 부모값에 의한 상속
    • #hi098123{color:red}
    • <div id="hi098123"><p>여기는?</p></div>

'웹 프로그래밍 > HTML' 카테고리의 다른 글

CSS content 깨지는 현상(주의점)  (1) 2020.06.23
HTML) Link, Script 태그 integrity 옵션  (0) 2020.06.18
Pure CSS Side Toggle Menu  (0) 2020.06.09
IE ')'가 필요합니다. 해결하기  (0) 2020.06.09
JS) 자바스크립트에서 " ' ` 따옴표, 억음 부호의 차이  (0) 2020.06.08
CSS) 투명도 조절하고 싶을때 (rgba, opacity)  (0) 2020.05.13
티스토리) 댓글에 링크 달기  (3) 2020.04.28
JS) toFixed() 1.0* => 1 (소수가 0일때 없애기)  (1) 2020.02.02

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글