이 기사에서는 웹 페이지의 배경과 글꼴을 변경하는 JavaScript 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
버튼을 클릭하여 웹 페이지 배경 및 글꼴의 색상을 변경하여 JavaScript. 웹 페이지에서 색상을 변경하는 N 버튼이 있습니다. 웹 페이지의 다른 버튼, 글꼴 및 배경을 클릭하면 다른 색상으로 변경됩니다. 매우 간단한 JavaScript 애플릿.
1. 기본 목표
웹 페이지를 열 자마자 먼저 인사말 메시지 "Hello"를 프롬프트합니다.
웹 페이지의 색상을 변경할 수있는 N 버튼이 있습니다. 여기서 리턴은 웹 페이지의 기본 색상이고 배경은 흰색이며 글꼴은 검은 색입니다.
다른 버튼을 클릭하면 웹 페이지의 글꼴과 배경이 다른 색상으로 변경됩니다.
원래 무지개 개선을하고 싶었지만 원칙은 정확히 동일하므로 더 많은 버튼을 쓰지 않습니다.
2. 기본 아이디어
핵심은 바디 태그 및 글꼴 JS에 대한 ID를 제공하여 JS에서 제어 할 수 있도록하는 것입니다. 이 예제는 JS 함수에 대한 응용 프로그램을 제공합니다.
3. 생산 과정
간단한 작은 페이지 만 있으면 자세한 내용은 주석을 참조하십시오.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> js는 배경색을 변경합니다 </title>
<!-이 단락을 JS 파일로 분리 할 수도 있지만이 코드는 너무 짧으므로 필요하지 않습니다.
<script type = "text/javaScript">
// onload는이 웹 페이지의 생성자와 동일하며 OnUnload는이 웹 페이지의 분리 기능과 동일합니다.
함수 load () {
경고 ( "안녕하세요!");
}
함수 unload () {
경고 ( "안녕!");
}
함수 changecolor (bcolor, fcolor) {
// 글꼴 <스팬 스타일 = "색상 : 전달 된 fcolor"에 대한 글꼴의 색상을 변경하는 것과 동일합니다.
document.getElementById ( "body"). style.background = bcolor;
document.getElementById ( "Ziti"). style.color = fcolor;
}
</스크립트>
</head>
<!-키는 전체 웹 페이지 및 라인 글꼴에 대한 ID를 제공하는 것입니다. JS의 getElementById () 메소드는 CSS에서 쉽게 물건을 제어 할 수 있습니다->
<body onload = "load ()"onunload = "unload ()"id = "body">
<span id = "ziti"> js </span>
<br />
<!-매개 변수를 이중 따옴표로 전달할 때 원래 이중 인용문은 단일 따옴표가됩니다. OnClick의 값은이 버튼이 클릭되면 트리거 될 것입니다.
<input onclick = "changecolor ( '#ff0000', '#ffffff')"type = "버튼"
값 = "빨간색" />
<input onclick = "changecolor ( '#ff9900', '#ffffff')"type = "버튼"
값 = "오렌지" />
<input onclick = "changecolor ( '#ffff00', '#000000')"type = "버튼"
값 = "노란색" />
...
<input onclick = "changecolor ( '#ffffff', '#000000')"type = "버튼"
값 = "반환" />
</body>
</html>
onunload () 함수는 IE 가이 페이지를 닫을 때만 거의 유효 하며이 대화 상자는 프론트 엔드에 있지 않으며 Google Chrome은 영향을 미치지 않습니다. 따라서이 기능은 의미가 거의 없습니다.
JS 색상 운영 기술에 관심이있는 친구들도 온라인 도구를 참조 할 수도 있습니다.
RGB 색상 인코딩 생성기
온라인 웹 색상 일치 도구
RGB 색상 쿼리 비교 table_color 코드 table_colour 영어 이름 수집
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.