Detailed explanation of Javascript dynamic operation CSS_javascript skills

1. How to use js to operate css attributes

1. For css attributes without a dash, generally use the style. attribute name directly.

Such as: obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. For CSS attributes containing underscores, remove each underscore and replace the first character after each underscore with uppercase letters.

Such as: obj.style.marginTop, obj.style.borderLeftWidth, obj.style.zIndex, obj.style.fontFamily, etc.

3. Special writing method for js to operate css float attribute

Because float is a reserved word of JavaScript, we cannot use obj.style.float directly, as this operation is invalid. The correct usage method is: IE: obj.style.styleFloat, other browsers such as Mozilla (gecko), ff, etc. use styleFloat: obj.style.cssFloat.

2. Use js to obtain css attribute values

1. Get the inline Style: obj.style. attribute name.

JS gets CSS attribute value

Cannot access class.

2. Get the Css properties inside the Class and outside the Link: IE uses the obj.currentStyle["property name"] method, while FF uses the getComputedStyle method

3. Use js to assign values ​​to css attributes

1. Assign class attribute

Assignment: document.getElementById('ceil').className = "class1";

If it has multiple values: document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText sets the css style of an object

document.getElementById('navition').style.cssText = "Your CSS code';

Summary

Knowing how to dynamically modify the styles applied to a page is extremely useful for creating stylish and interactive web pages - the knowledge explained in this article forms the basis for more advanced techniques such as JavaScript animations the basis of. It is important to note that you should use dynamic style modification responsibly and do not overuse it. As mentioned earlier, style modifications can also improve Web efficiency - showing and hiding content can help avoid unnecessary data interactions between the client and server.