Daily coding

CSS : Java Script에서 CSS적용하기 본문

Front-end/Client

CSS : Java Script에서 CSS적용하기

sunnnkim 2020. 1. 9. 20:35

버튼 누르기 전
버튼 누른후 

 

 

< 실제 코드 >

 

obj = document.getElementById("demo");  -----> getElement를 통해 오브젝트를 통째로 받아온다.

 

// css 적용하기

---> .style 로 어트리뷰트에 접근

obj.style.color= "white";

obj.style.backgroundColor = "blue";

obj.style.textAlign = "center";

obj.style.borderStyle = "double";

obj.style.borderColor ="#00ff00";

obj.style.fontFamliy = "MS PGOTHIC";

obj.style.fontStyle = "italic";

obj.style.fontSize = "24pt";

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- Java Script에서 CSS적용하기 -->

<div id="demo">Hello CSS World!</div>
<br>
<button type="button" onclick="func()">적용</button>

<script type="text/javascript">
function func() {
	
	obj = document.getElementById("demo");

	// css 적용하기
	
	obj.style.color= "white";
	obj.style.backgroundColor = "blue";
	obj.style.textAlign = "center";
	obj.style.borderStyle = "double";
	obj.style.borderColor ="#00ff00";
	obj.style.fontFamliy = "MS PGOTHIC";
	obj.style.fontStyle = "italic";
	obj.style.fontSize = "24pt";
}

</script>
</body>
</html>

'Front-end > Client' 카테고리의 다른 글

CSS : list 스타일과 list-style-image 설정  (0) 2020.01.09
CSS : Anchor 태그와 속성들  (0) 2020.01.09
CSS : text 정렬 및 다양한 attribute 들  (0) 2020.01.09
CSS : text size 의 단위들  (0) 2020.01.09
CSS : CSS 기초 및 방식  (0) 2020.01.09
'Front-end/Client' Related Articles more