JS dynamically adds style and style name to string/div

We will encounter Dynamic Modification of div or text styles in various WEB front sections, below I will summarize several frequently used dynamic examples for adding styles and style names to strings/div. I hope this method will be helpful to you.

Add a style to the string

The Code is as follows:

Copy code

<Script type = "text/javascript"> Var txt = "Hello World! " Var txt = "Nice to meet you! "; // Original size Document. write ("<p>" + txt + "</p> "); // Increase Document. write ("<p> big:" + txt. big () + "</p> "); // Small Document. write ("<p> small:" + txt. small () + "</p> "); // Clear outlines Document. write ("<p> Bold:" + txt. bold () + "</p> "); // Italics; italics Document. write ("<p> Italic:" + txt. italics () + "</p> "); // Flashing Document. write ("<p> Blink:" + txt. blink () + "(does not work in IE) </p> "); // Fixed Document. write ("<p> Fixed:" + txt. fixed () + "</p> "); // Strike Document. write ("<p> Strike:" + txt. strike () + "</p> "); // Font Document. write ("<p> Fontcolor:" + txt. fontcolor ("red") + "(green by default) </p> "); // Font size Document. write ("<p> Fontsize:" + txt. fontsize (16) + "</p> "); // Small write Document. write ("<p> toLowerCase:" + txt. toLowerCase () + "</p> "); // Change to uppercase Document. write ("<p> toUpperCase:" + txt. toUpperCase () + "</p> "); // The following Document. write ("<p> Subscript:" + txt. sub () + "</p> ") // The above Document. write ("<p> Superscript:" + txt. sup () + "</p> ") // Hyperlink. Red underline Document. write ("<p> Link:" + txt. link ("http://www.bKjia. c0m") + "</p> ") </Script>

The above method is just an example of adding a style to the text that is super simple and inconvenient to maintain. The following is what we will talk about.

I,

The Code is as follows:	Copy code
Function addclass (elm, newclass ){ Var c = elm. className; If (c! = "") Elm. className = newclass; }

Write a function and pass in the object element and style name to determine whether it is empty. If it is not empty, assign a style name;

II,

The Code is as follows:	Copy code
Function addclass (elm, newclass ){ Var c = elm. className; Elm. className = (c = "")? Newclass: c + ''+ newclass; }

Write a function, input the object element, and add it to the style name to determine whether it is null. If it is null, assign a value. Otherwise, add a space and assign a value;

III,

The Code is as follows:	Copy code
Function addclass (elm, newclass ){ Var classes = elm. className. split (''); Classes. push (newclass ); Elm. className = classes. join (''); }

Input the object element and style name, and then set elm. className is a string separated by a space. It is removed from the space and converted into an array using the split method. Then, the style is added to the Array Using the push method, it is a very unique and awesome method to add spaces to join and convert them into strings and then assign values to the class of the element.

However, I think it is a bit inadequate. What should I do if the element already has a newclass name? Like this:
<Div class = "div1 div2">
Then I want to add a div2 class to this div. If the third method is used, although no error will occur, the page will be displayed like this <div class = "div1 div2 div2">, so I used the fourth method:

IV,

The Code is as follows:	Copy code
Function zhen (obj, claName ){ Var groovy = obj. className. split (""); For (var I = 0; I <linoleic. length; I ++) { If (linoleic [I] = claName) Return; } CIA. push (claName ); Obj. className = fig (""); }

Based on the advantages of the third method, a circular decision is made to ensure that no duplicate names exist.

Now, if you use jquery, all the above methods are weak. Next I will introduce jquery to you to add styles to css dynamically.

Jquery dynamically adds styles

 

The Code is as follows:	Copy code
<P class = "myclass" title = "select your favorite fruit"> what is your favorite fruit? <P>

 

In the code above, the class is also the attribute of the p element. Therefore, you can use the attr () method to obtain the class and set the class.
The Code is as follows:

Var p_class = $ ("p"). attr ("class"); // obtain the class of the p element
 

You can also use the attr () method to set the class.

The Code is as follows:	Copy code
$ ("P"). attr ("class", "high"); // set the class of the p element to high

 

In most cases, it replaces the original class with the new class, instead of appending the new class on the basis of the original

The new Code is

The Code is as follows:	Copy code
<P class = "high" title = "select your favorite fruit"> what is your favorite fruit? <P>

 

Append Style

The Code is as follows:	Copy code
<Style> . Another { Font-style: italic;/* italic */ Color: blue;}/* set the font to blue */ </Style>

 

Example

The Code is as follows:

Copy code

<Ul> <Li> <a onclick = "ajaxgetlist (1);" href = "javascript: void (0 ); "class =" mainfhove "id =" page1 "> 1 </a> </li> <Li> <a onclick = "ajaxgetlist (2);" href = "javascript: void (0 ); "class =" "id =" page2 "> 2 </a> </li> <Li> <a onclick = "ajaxgetlist (3);" href = "javascript: void (0 ); "class =" "id =" page3 "> 3 </a> </li> <Li> <a onclick = "ajaxgetlist (4);" href = "javascript: void (0 ); "class =" "id =" page4 "> 4 </a> </li> <Li> <a onclick = "ajaxgetlist (5);" href = "javascript: void (0 ); "class =" "id =" page5 "> 5 </a> </li> <Li> <a onclick = "ajaxgetlist (6);" href = "javascript: void (0 ); "class =" "id =" page6 "> 6 </a> </li> </Ul> <Script language = "javascript"> // Dynamically adjust the product display list Function ajaxgetlist (page) { For (I = 1; I <= 6; I ++) { If (I = page) { $ ("# Page" + page). addClass ("mainfhove "); } Else { $ ("# Page" + I) [0]. className = ""; } } } </Script>