<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<style type="text/css">
#out{
font-family: 'Do Hyeon', sans-serif;
padding: 20px 20px;
width: 500px;
margin-top: 50px;
border: 0px solid black;
}
</style>
<script type="text/javascript">
//버튼이벤트_3씩 감소/증가
//8보다 작아지면 alert:더이상 줄일수 없습니다 후에 프로그램 종료, 60보다 커지면 alert:~ 종료
//버튼 클릭시마다 현재 글꼴사이즈를 fsize에 저장
window.onload=function (){
var fsize=document.getElementById("fsize");
var out=document.getElementById("out");
fsize.innerHTML="현재 글꼴 크기는 40px 입니다";
//btn1은 점점 작게 이벤트
document.getElementById("btn1").onclick=function(){
var outsize=parseInt(out.style.fontSize,10);
//alert(outsize);
outsize-=3;
if(outsize<8){
alert("더 이상 줄일 수 없습니다");
return; //메서드 종료
}
out.style.fontSize=outsize+"px";
fsize.innerHTML="현재 글꼴 크기는 "+outsize+"px 입니다";
}
//점점 크게 이벤트
document.getElementById("btn2").onclick=function(){
var outsize=parseInt(out.style.fontSize);
//alert(outsize);
outsize+=3;
if(outsize>60){
alert("더 이상 커질 수 없습니다");
return; //메서드 종료
}
out.style.fontSize=outsize+"px";
fsize.innerHTML="현재 글꼴 크기는 "+outsize+"px 입니다";
}
//글꼴색
document.getElementById("mycolor1").onchange=function(){
alert(this.value);
out.style.color=this.value;
}
//바탕색
document.getElementById("mycolor2").onchange=function(){
alert(this.value);
out.style.backgroundColor=this.value;
}
//테두리선 굵기
document.getElementById("select").onchange=function(){
alert(this.value);
out.style.borderWidth=this.value+"px";
}
}
</script>
</head>
<body>
<button type="button" id="btn1">작게</button>
<button type="button" id="btn2">크게</button>
<hr>
<div id="fsize"></div>
<b>글자색 선택: </b>
<input type="color" value="#ccffcc" id="mycolor1"><br>
<b>배경색 선택: </b>
<input type="color" value="#ccffff" id="mycolor2"><br>
<b>테두리선 굵기 선택</b>
<select id="select" style="width: 120px;">
<!-- value가 있을 땐 value값을 우선으로 읽고 없을 경우는 option 사이값으로 -->
<option value="0">0</option>
<option>1</option>
<option>3</option>
<option>5</option>
<option>7</option>
</select>
<div id="out" style="font-size: 40px;">오늘은 즐거운 월요일입니다</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210928_image,button,zoom-in/out (0) | 2021.09.28 |
|---|---|
| 210927_table,checkbox,radio (0) | 2021.09.28 |
| 210927_image,button,zoom-in/out, (0) | 2021.09.27 |
| 210927_array,button,image,push,innerHTML (0) | 2021.09.27 |
| 210927_image,innerHTML,confirm,button (0) | 2021.09.27 |