Of Stack

javascript Dynamic Style style instance analysis

  • 2020-06-15 07:35:15
  • OfStack

This article gives an example of how javascript dynamically sets the style style. Share to everybody for everybody reference. The specific analysis is as follows:

Modify style dynamically

1. Error-prone: Instead of setting the class attribute, you change the style of the element.
2. Error-prone: Use "style. attribute name" for individually styled properties. Note that in css the attribute name is in javascript

Attribute names may not be the same, but focus on those attribute names that contain -, because

javascript - you can't do attributes, class names. So in CSS, the background color is ES20en-ES21en, while in javascript, it is ES23en.background. The element style name is class, which in javascript is the className attribute; font size - > style.fontSize;margin-top- > style.marginTop

3. Modify the style of the control separately < input type="button" value="AAA" onclick="this.style.color='red'" / >

1. Example 1 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> The dynamic change 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");
 // Notice that this is used here className Rather than 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"> The People's Republic of China </font>
 </div>
 <input type="button" value=" day " onclick="dayclick()" />
 <input type="button" value=" The dark night " onclick="nightclick()" />
</body>
</html>

2. Example: Dynamic modification of style(simulated turning on and off lights) 


<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 = " Turn on the light ";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = " Turn off the lights "; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value=" Turn on the light " id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

3. Sample: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> Dynamic setting style practice ( Change the background color of the text box )</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") {
  // Set up the txtOnBlur Function for input Elements of the onblur The response function to the event 
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur is onblur Instead of being called by the response function 
  I can use all of them this To fetch the occurrence event control object 
 */
 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>

Hopefully this article has been helpful in your javascript programming.

Related articles: