Daily coding

Java Script : 예제1 본문

Front-end/Java Script

Java Script : 예제1

sunnnkim 2020. 1. 9. 19:18

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body id="bd">
<h1>배경색의 변경</h1>
<p>※ 다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다. </p>
<br>
<button type="button" onclick="document.bgColor = '#ff0000';">빨강</button>
<button type="button" onclick="document.bgColor = '#3ADF00';">녹색</button>
<button type="button" onclick="document.bgColor = '#0040FF'">청색</button>
<button type="button" onclick="document.bgColor = '#FF8000'">주황색</button>
<button type="button" onclick="document.bgColor = '#000000'">검정색</button>
<button type="button" onclick="document.bgColor = '#ffffff'">흰색</button>


<script type="text/javascript">
function red() {
	document.bgColor = "#ff0000";
}
function green() {
	document.bgColor = "#3ADF00";
}
function blue() {
	document.bgColor = '#0040FF';
}
function orange() {
	document.bgColor = '#FF8000';
}
function black() {
	document.bgColor = "#000000";
}
function white() {
	document.bgColor = "#ffffff";
}
</script>
</body>
</html>

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

Java Script : 예제3 - select 태그를 사용하여 링크 이동  (0) 2020.01.09
Java Script : 예제 2 - 퀴즈 맞추기  (0) 2020.01.09
JavaScript : DOM 객체 ( Document Object Model )  (0) 2020.01.08
JavaScript : 자바스크립트 핸들링 / 마우스 이벤트  (0) 2020.01.08
JavaScript : 자바스크립트에서 페이지 이동 및 페이지 관련 메소드  (0) 2020.01.08
'Front-end/Java Script' Related Articles more