1. Fallible : Changing the style of an element is not a setting class attribute , It is className attribute .class yes JS A reserved keyword for .
2. Fallible : Modify the properties of the style separately "style. Property name "
3. Pay attention to css The property name and in javaScript in
The property name may be different during operation , It mainly focuses on those attribute names that contain - Properties of , because javaScript in - You can't do properties , Of class name . So in CSS The background color is background-clolor, and javaScript Is in the style.background;
4. Element style name is class, stay javaScript Medium is className attribute
1. give an example 1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Dynamic modification 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");
// Pay attention to the use of className instead of 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=" Night " onclick="nightclick()" />
</body>
</html> 2. give an example 2 Dynamic modification style( Turn on the lights , Turn off the 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> <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 txtOnBlur Function is input Elemental onblur Event response function
inputs[i].onblur = txtOnBlur;
}
}
}
function txtOnBlur() {
/*
txtOnBlur yes onblur Response function of , Instead of being called by the response function
Function of , All can be used this To get the object of the event control
*/
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>
<html>
<head>
<title>className Property usage instance </title>
<style>
.one{
border:1px solid;
width:200px;
height:300px;
background:#eeefff;
}
.two{
border:1px solid;
width:300px;
height:350px;
background:#efefef;
}
</style>
</head>
<body>
<div id="a"> This is a a Elements , No display mode is specified by default , Click the button below to add a style to it </div>
<input type="button" value=" Add the style " onclick="add_class()"/>
<div id="b" class="one"> This is a b Elements , A style has been specified , You can click the button below to change its appearance </div>
<input type="button" value=" Change the look " onclick="up_class()"/>
</body>
<script language="javascript">
function add_class(){
var a = document.getElementById("a");
a.className = "one";
}
function up_class(){
var b = document.getElementById("b");
b.className = "two";
}
</script>
</html>

JavaScript Dynamic operation style More articles about

  1. Javascript Dynamically create style node

    There are many that offer dynamic creation style Node method , But most of them are just external css file . How to use the string generated by the program to create dynamically style node , I did 2 Hours .  Static external css File syntax : @import ...

  2. javascript Dynamic operation Html

    <html> <body> <p>aaaaa</p> <input type="button" value="con ...

  3. Javascript Dynamic operation CSS summary

    One . Use js operation css How to write attributes 1. For those without a middle line css Properties are used directly style. Property name is enough . Such as :obj.style.margin,obj.style.width,obj.style.left ...

  4. js Implement dynamic operations table

      The case of this chapter is through js, Dynamic operation table, Realize the operation of adding, deleting, modifying and querying on a single page . The brief cases are as follows : <%@ page language="java" contentType=&quo ...

  5. javascript DOM Summary of basic operation knowledge

    Frequently used javascript Yes dom, There are many friends who like this convenience , To be better, right dom To operate , These foundations must be known .   DOM Additive elements , Use node properties   <!DOCTYPE html PUBLIC ...

  6. javascript Generate tables, add, delete, modify and query JavaScript Dynamically change the contents of table cells Dynamically generate tables JS Get any cell in the table javascript How to dynamically delete a table row

    jsp Page table layout Html Code <body onload="show()"> <center> <input type="text" ...

  7. js Dynamically create style node (js Add... To the file css)

    ie6 You can't document.createElement('style') then append To head In the label . So I found such a good article --------------------- There are many that offer dynamic creation ...

  8. use Javascript Dynamic add delete HTML Element instances ( Reprint )

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Javascript Adjust the line spacing of the article dynamically 、 typeface 、 Color , And print page and close window function

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

Random recommendation

  1. bnuoj 24251 Counting Pair

    A simple rule problem , Draw a two-dimensional table and add the numbers separately to find the obvious symmetry Topic link :http://www.bnuoj.com/v3/problem_show.php?pid=24251 #include< ...

  2. Javascript Modular programming ( Two ):AMD standard 【 turn 】

    author :  Ruan Yifeng date : 2012 year 10 month 30 Japan The first part of this series introduces Javascript The basic way to write a module , Today, how to use modules properly . ( Continued above ) 7、 ... and . Module specification Think about it first , Why are modules important ? because ...

  3. eliminate PyCharm The wavy line in the full screen

    PyCharm The more strict PEP8 Inspection rules of , If the code is not properly named , Even the extra spaces are marked by wavy lines , The editor is full of wavy lines , The scroll bar on the right is also full of yellow or gray marking lines , It's a great influence on editors . I saw it on the Internet ...

  4. Custom elements – stay HTML Define new elements in

    This article is translated from Custom Elements: defining new elements in HTML, On the premise of ensuring the accurate expression of technical points , There are a few adaptations and nonsense in the style of writing . The address of the original translation Contents of this article introduction In fashion ...

  5. OpenGL ES 2.0 Fog

    Using fog in the scene can not only improve the realism , It can also optimize performance in specific situations . Specifically, when the object is far enough from the camera , The fog is thick enough , At this time, we can only see the fog but not the object , So you don't have to compute the coloring of objects in detail , This can greatly improve rendering efficiency . There's a lot of fog ...

  6. Swift 3.0 The first 1 Step , Open source for all developers

    In mobile development ,Android One of the reasons why development has always been popular is that it is an open source , There are many open source projects . The code can use , That's a lot iOS The envy of developers . But it's worth celebrating , With swift The development of programming language , Beijing time. 12 ...

  7. Sting and StringBuffer The difference between

    java.lang.String Represents an immutable sequence : s1 = "hello"; s2 = "world"; s1 = s1 + s2; The memory allocation is s1 There are blocks of memory ...

  8. [ Explore ] Little light blog moved to WordPress( One )

    Abstract : A little bit of blog backup XML adopt DiandianToWordpress-beta.sh( At the end of the paper ) Move to Wordpress Blog I have used little light blog , I know it's like a little blog ,Lofter Blog exported XML The document does not ...

  9. mfc--- Get the current time

    CTime t = CTime::GetCurrentTime(); CString strTime = t.format("%Y/&m%d" %h:%M:%S);

  10. Comparison of Static Code Analysis Tools for Java

    http://www.sw-engineering-candies.com/blog-1/comparison-of-findbugs-pmd-and-checkstyle https://stack ...