JavaScript method summary that changes the CSS style

JavaScript allows you to instantly change the CSS style, drawing the user's eye to where you want them to be, and providing a great interactive experience.

There are four ways to modify CSS:

Modify the node style (inline style);
Change node class or id;
Write the new css;
Replace the style sheet in the page.

The latter two methods are not recommended. Almost all functions can be implemented in the first two ways, and the code is much clearer and easier to understand.

We'll also talk about how to get the actual style of the element and the considerations in the 1 form.

1. Modify node style (inline style)

This method has the highest weight, written directly on the node's style property, which overrides the styles set by other methods. It's easy to use:

var element = document.getElementById("test");
element.style.display = "none" // Make the element hidden 

Note, however, that some CSS style names are composed of several words such as ES31en-ES32en, ES33en-ES34en, etc., which are linked by dashes (-), whereas in JavaScript dashes are used for "minus" and therefore cannot be used as attribute names. We need to use "Hump format (camelCase)" to write attribute names such as fontSize, backgroundImage.

Also note that many style have units and cannot be given a single number. For example, the units of fontSize are px, em, % (percentage), and so on.

In violation of the principle of separation performance and behavior of this method, one kind is only suitable for defining element often change instant style () associated with the behavior, such as the div 1 can be used to drag and drop, with drag and drop, his top, left attribute is changing, at this time will not be able to define the class or other way, use this approach can change the style instant, Settings and override the other way around.

2. Change class and id

id and class are "hooks" that set the style, and the browser automatically updates the style of the element after the change.

Changing id is similar to class, but it is not recommended because id is used to position elements and it is best not to use it to define an element's display style, and id is often used as a hook for JavaScript, which can cause unnecessary errors.
In JavaScript, class is a reserved keyword, so use className as an attribute of the access element class, for example:

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";// Set up the class
element.className += " yellowBack";// increase class

The sad thing is that the attribute is a string containing all class elements and all class elements are separated by Spaces, which makes deleting class awkward.

I used regular expressions to delete class at different places in the string (head, tail, middle), but then I figured out a better way to add a space at the beginning and end of the className property, which would be the middle method.

// delete class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

1 style modification is best done this way. Define the style of CSS. JavaScript just gives the instruction to change the style.

The latter two methods, neither elegant, also have 1 compatibility problem, I will not cover ~

3. Get the real style

The first thing to make clear is that element.style does not work, it only gets inline styles, and the definitions in the stylesheet are not.
Since the style of an element can be defined in so many places, it is not clear what the actual style will look like. Is there any way to get the actual style of the element displayed in the browser?
In fact, Both Microsoft and W3C provide corresponding methods. We only need 1 package to use:

// Get the element style 
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

Remember that the styleName is in "hump format" ~~

4. Display and hide forms (don't abuse CSS)

We often see forms where options are added dynamically. For example, if you select "married" on a form, there will be an additional input field for you to enter your spouse's name.

If there is no choice, then of course the "spouse" related form should be hidden, but in this case should not use CSS to solve, that is, style.display= "none" to hide.

If the user submits the form, the contents of the hidden input field will be submitted from the beginning, which may cause some unexpected errors

The correct way to do this is to put it in the DOM hyperspace so that you don't have the same problem.

This is the end of this article, I hope you enjoy it.