Scripting Inline Styles

There are three ways to introduce CSS styles in HTML:

1. Most commonly used, introduce style sheets, write styles in style sheets, and introduce them in the following ways:
<link href= "Css/style.css" rel= "stylesheet" type= "Text/css" >
2. Wrap up the HTML header with <style></style>, and write the style in this area:
<style type= "Text/css" >
*{
padding:0;margin:0
}
</style>
3. Write inline styles directly inside the tag.
<div style= "color: #333" ><div>

The following is a simple introduction to the use of JS inline style operation:

The most straightforward way to script CSS is to change the property values of the style of individual document elements, like most HTML properties, which are also attributes of the element object, which can be manipulated in JS. Because the style is special, there is usually not one property in the style, so the value of style is not just a string, but a Cssstyledeclaration object. By manipulating the object, you can change the style of the element by using JS. Using JS to manipulate CSS styles requires attention to the following points:

(1) Generally, the property of HTML and the style attributes defined by the <style> tag will contain one or more ligatures such as: Background-color, but in JS the two characters are minus, writing as before will be an error. Thus in the use of JS to manipulate the properties of the first to remove the hyphen, but also the original tightly attached to the hyphen character after conversion to uppercase. In this way the CSS property Border-width is converted in order to: BorderWidth. JS in the following way to access CSS style properties: e.style.borderwidth= "2px". In addition, if you use the reserved words in JS in CSS properties, you need to add CSS on top of the above, such as the float property in CSS, and use the Cssfloat property of the Cssstyledeclaration object to set it.

(2) CSS style property values need to be used as strings in the Cssstyledeclaration object. At the same time all the positioning properties (such as: width,height,top,left, etc.) need to add unit px. In this way, JS is used to manipulate the string when it is first processed (you can use the method of the string object split).

(3) JS to get the attribute value and assign a value to the property several ways:

A, directly using the Cssstyledeclaration object to operate

B, GetAttribute (), and setattribute () are assigned values for obtaining the property value and for a property, respectively.

However, when working with CS-style properties in either of these ways, you can only get values that have been set through the JS code or that have the desired inline style set by the HTML element display (that is, the property value that is set in the HTML tag through the property style). That is, the document may contain a style sheet to set the width of the div to 300px, but reading the property by JS will give you an empty string, unless there is already a style property in JS that overrides the settings in the Style list.

C, using the method of the Window object getComputedStyle () to get the computed style, the method is to obtain the above can not get the property is worth, but the method obtained through the property is read-only, Both absolute values, such as width in percent, are calculated to be converted to specific values, and the color is converted to Rgba, and the method does not calculate the conforming attribute.

Scripting Inline Styles