JavaScript changes CSS style method Rollup _javascript tips

JavaScript allows you to change CSS styles instantly, so you can draw users ' eyeballs to the places you want them to focus on, and provide a better interactive experience.

JavaScript has 4 ways to modify CSS:

Modifies the node style (inline style);
Change node class or ID;
Write a new CSS;
Replaces the style sheet in the page.

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

It also tells you how to get the real style of the element and the considerations in a form.

1. Modify node style (inline style)

This method has the highest weight, written directly on the node's style property, and overrides the style set by other methods. The use method is simple:

var element = document.getElementById ("test");
Element.style.display = "None"//Let element hide

Note, however, that some CSS style names are made up of several words, such as font-size, Background-image, and so on, they are all connected with dashes (-), whereas JavaScript dashes are "minus" and therefore cannot be used as property names. We need to use the Hump format (CamelCase) to write the property names, such as FontSize, BackgroundImage.

Also note that many of the style are units, not just a number. For example, the unit of fontsize has px, EM,% (percentage) and so on.

This approach violates the principle of separation of performance and behavior, it is generally only appropriate to define the immediate style (associated with behavior) that the element often changes, such as a div that can be dragged and dragged, and his top and left properties are constantly changing, and cannot be defined in class or otherwise. This way you can modify styles instantly and override other ways of setting.

2, change class, ID

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

The method of changing IDs is similar to class, but it is not recommended by individuals, because IDs are used to locate elements, it is best not to define the display style of elements, and IDs are often used as JavaScript hooks, which can cause unnecessary errors.
In JavaScript, class is a reserved keyword, so use classname as an attribute to access the element class, for example:

. redcolor{
 color:red;
yellowback{
 background:yellow;
}
Element.classname = "Redcolor";/Set class
Element.classname + = "Yellowback";/+ Add Class

But the more depressing thing is that this property is a string containing all the classes of the elements, all classes are separated by spaces, so it is inconvenient to delete class (add to say, do a string connection between the can, but remember to add a space before it ~).

I used a regular expression when I deleted it. Delete (head, tail, middle) according to the class in different position in the string, but then think of a better way is to add a space to the end of the classname attribute, all into the middle method, directly to the substring replacement:

Delete class
function Removeclass (element,classromove) {
var classnames = ' +element.classname+ ';
Classnames = classnames. Replace ("+classromove+", "");
String.Trim (classnames);
Element.classname = Classnames;
}

General style modification is best used in this way, the definition of a good CSS style, JavaScript is only issued a style change instructions, the specific style definition or to the CSS to do.

The latter two methods, neither elegant, there is a certain compatibility problem, I will not introduce ~

3. Get the real style

The first thing to make clear is that the element.style is not possible, he can only get inline style, the definition in the stylesheet cannot be obtained.
Since the style of the element can be defined in so many places, what exactly does his true style look like, what is the way to get the true style of the elements that are displayed in the browser?
In fact, Microsoft and the consortium have provided the appropriate method, we only need to carry out a package can be used:

Gets 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 the incoming stylename is in the "hump format" ~ ~

4, the form display and hide (do not abuse CSS)

We often see some forms with options that are dynamically added, such as when you select a form in which the marital status is "married", then an additional input box allows you to enter your spouse's name.

If there is no choice, then of course, the "spouse" related forms are hidden, but at this time should not be used to solve the CSS, that is, can not use style.display= "none" to hide.

Because whether you hide it or not, the input box is there, does not increase the ~ [Halo] straightforward point, that is, although hidden, but he still exists with the DOM, if the user submits the form, the contents of the hidden input box will be submitted together, there may be some unexpected mistakes ~

The right thing to do is to put this piece of content into the DOM hyperspace so that there's no problem.

The above mentioned is the entire content of this article, I hope you can enjoy.