JavaScript 동적 설정 스타일 예시 분석_javascript 기술-JS 튜토리얼-php.cn

JavaScript 동적 설정 스타일 예시 분석_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:59:31

원래의

1336명이 탐색했습니다.

본 글의 예시에서는 자바스크립트를 이용하여 스타일을 동적으로 설정하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

스타일의 동적 수정

1. 오류가 발생하기 쉬움: 요소의 스타일을 수정하는 것은 class 속성이 아니라 className 속성을 설정하는 것입니다.
2. 오류가 발생하기 쉬움: 스타일 속성을 개별적으로 수정하려면 "style.attribute name"을 사용하세요. CSS의 속성 이름은 JavaScript

에 있습니다.

작업 중에 속성 이름이 다를 수 있으며, 주로 속성 이름에 -가 포함된 속성에 중점을 둡니다.

JavaScript에서는 속성과 클래스 이름을 사용할 수 없습니다. 따라서 CSS의 배경색은 background-clolor이고 JavaScript에서는 스타일 이름이 class이고 JavaScript에서는 className 속성입니다. ->스타일 .marginTop

3. 컨트롤 스타일을 개별적으로 수정

1. 예시 1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

로그인 후 복사

2. 예: 스타일을 동적으로 수정합니다(조명 켜기 및 끄기 시뮬레이션)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

로그인 후 복사

3. 예:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数，而不是被响应函数调用
 的函数，所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.