현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

인풋버튼관련해서 질문있습니다

익명 사용자의 이미지
글쓴이: 익명 사용자 / 작성시간: 토, 2017/03/11 - 12:27오전 

<!DOCTYPE html>
<html>
 
<head>
    <style type="text/css">
        .dark {
            background-color: black;
        }
    </style>
</head>
 
<body>
    <input type="button" onclick="document.body.className='dark'" value="dark" />
    <input type="button" onclick="document.body.className=''" value="reset" />
</body>
 
</html>

저렇게 버튼이 2개있고 이벤트라고하나요? 효과가 2개 있는데

버튼을 1개로 축소하고

백그라운드가 black일때 버튼이름이 reset
백그라운드가 white일때 버튼이름이 dark가 되도록 어떻게 하나요?

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 토, 2017/03/11 - 2:02오전

즉시 갱신이 안되는데. 대충 맞춰보니 되네요.
정확한건 책 예제 참고해보세요.

 
<head>
    <style type="text/css">
        .dark {
            background-color: black;
        }
        .white {
            background-color: white;
        }
    </style>
</head>
 
<body>
 
<script language="JavaScript">
 
document.body.className = "white";
 
//백그라운드가 white일때 버튼이름이 dark가 되도록 어떻게 하나요?
//백그라운드가 black일때 버튼이름이 reset
//http://www.w3.org/TR/2010/WD-html-markup-20101019/body.html
 
function fn_toggle()
{
	var div = document.getElementById("btn1");
	if(document.body.className == "white")
	{
		div.value = "reset";
		document.body.className = "dark";
		return;
	}
	if(document.body.className == "dark")
	{
		div.value = "dark";
		document.body.className = "white";
		return;
	}
}
</script>
 
    <input type="button" onclick="fn_toggle();" value="dark" id="btn1" />
</body>
 

CSS 폰트 속성
http://cafe.naver.com/jjdev/1923

http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-style
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight

CSS 로 하면. 크기가 맞다.
HTML Font 는 브라우저 마다. 크기가 다르다.

댓글 첨부 파일: 
첨부파일 크기
Package icon css_editor_HTML_소스로_디자인_편집하는_방법.zip7.27 KB

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

둘러보기