자바스크립트로 CSS 변경하기

JavaScript

자바스크립트로 CSS 변경하기

purism02 2015. 11. 5. 14:44

자바스크립트로 CSS 변경하기

자바스크립트로 CSS변경하기는

개체명.style.속성값=설정값

[배경색 바꾸기]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트로 CSS 변경하기</title>
<style>
#box {
  width: 300px;
  height: 100px;
  line-height: 100px;
  color: #fff;
  background-color: blue;
  text-align: center;
}
</style>
<script>
  function bgRed(){
    var box = document.getElementById("box");
    box.style.backgroundColor = "red";
  }
  function bgGreen(){
    var box = document.getElementById("box");
    box.style.backgroundColor = "green";
  }
</script>
</head>
<body>
	<input type="button" value="빨강" onclick="bgRed()">
	<input type="button" value="녹색" onclick="bgGreen()"><br><br>
	<div id="box">Hello~</div>
</body>
</html>

기본

빨강 클릭하면 red

녹색 클릭하면 green

그런데 여기서 이렇게 작업할 경우는 일일이 색상 빨강 = red, 녹색 = green 이렇게 정해줘야 한다.

너~~무 귀찮을 수도 있으니까

color 값을 받아서 활용해보기로!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트로 CSS 변경하기</title>
<style>
#box {
  width: 300px;
  height: 100px;
  line-height: 100px;
  color: #fff;
  background-color: blue;
  text-align: center;
}
</style>
<script>
  function bgcolor(color){
    var box = document.getElementById("box");
    box.style.backgroundColor = color;
  }
</script>
</head>
<body>
	<input type="button" value="빨강" onclick="bgcolor('red')">
	<input type="button" value="녹색" onclick="bgcolor('green')"><br><br>
	<div id="box">Hello~</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>자바스크립트로 CSS 변경하기</title>

<style>

#box {

width: 300px;

height: 100px;

line-height: 100px;

color: #fff;

background-color: blue;

text-align: center;

}

</style>

<script>

function bgcolor(color){

var box = document.getElementById("box");

box.style.backgroundColor = color;

}

</script>

</head>

<body>

<input type="button" value="빨강" onclick="bgcolor('red')">

<input type="button" value="녹색" onclick="bgcolor('green')"><br><br>

<div id="box">Hello~</div>

</body>

</html>

우왕 이제 그 bgcolor(''칼라값') 이 바로 칼라값으로 css style이 먹여짐!

[텍스트 색상 바꾸기]

그리고 이번엔 라디오 버튼 선택 시 텍스트 색상이 바뀌는 것을 해볼까~!!!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자바스크립트로 CSS 변경하기</title>
<style>
#box {
  width: 300px;
  height: 100px;
  line-height: 100px;
  color: #fff;
  background-color: #000;
  text-align: center;
}
</style>
<script>
  function fcolor(color){
    var box = document.getElementById("box");
    box.style.color = color;
  }
</script>
</head>
<body>
	<input type="radio" name="fontcolor" onclick="fcolor('pink')"> pink
	<input type="radio" name="fontcolor" onclick="fcolor('white')"> white
	<input type="radio" name="fontcolor" onclick="fcolor('yellow')"> yellow<br><br>
	<div id="box">Hello~</div>
</body>
</html>