Detailed Javascript dynamic operation CSS

One, the use of js operation CSS attribute writing

1. For CSS properties without underscores, the name of style. property can be used directly.

For example: obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. For CSS properties with underscores, remove each underscore and capitalize the first character after each underscore.

Such as: obj. Style. MarginTop, obj. Style. BorderLeftWidth, obj. Style. ZIndex, obj. Style. FontFamily, etc

3, js operation CSS float property of special writing

Because float is a reserved word in javascript, we cannot use obj.style.float directly, which is invalid. The correct method of use is to: IE: obj. Style. StyleFloat, other Mozilla browser (gecko), ff, etc with styleFloat: obj. Style. CssFloat.

Second, use js to get CSS property values

1. Get the property name of Style: obj. Style. < Div id = "css88" class = "ss" style = "width: 200 px; Height: 200 px; Background: # 333333 "> JS gets CSS property value < / div> Unable to access class.

2. Get Css properties inside the Class and outside the Link: IE USES the obj.currentstyle [" property name "] method, whereas FF USES the getComputedStyle method

Use js to assign values to CSS properties

1. Assign the 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 ';

conclusion

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