JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.3 Scripting Inline Styles

16.3 Scripting Inline Styles


The most straightforward way to script CSS is to alter the style attribute of individual document elements. Like most HTML attributes, styleis also a property of the Element object, and you can manipulate it in JavaScript. The styleproperty is unusual, however: its value is not a string, but a CSSStyleDeclaration object. The JavaScript properties of this style object represent the CSS properties specified by the HTML style attribute. To make the text of an element e big, bold, and blue, for example, you can use the following code to set the JavaScript properties that correspond to the font-size font-weight and color style properties:

e.style.fontSize = "24pt"; e.style.fontWeight = "bold"; e.style.color = "blue";

Naming Conventions: CSS Properties in JavaScript

Many CSS style properties, such as font-size, contain hyphens in their names. In Java-Script, a hyphen is interpreted as a minus sign, so it is not possible to write an expression like:

e.style.font-size = "24pt"; // Syntax error!

Therefore, the names of the properties of the CSSStyleDeclaration object are slightly different from the names of actual CSS properties. If a CSS property name contains one or more hyphens, the CSSStyleDeclaration property name is formed by removing the hyphens and capitalizing the letter immediately following each hyphen. Thus, the CSS property border-left-width is accessed through the JavaScript borderLeftWidth property, and you can access the CSS font-family property with code like this:

e.style.fontFamily = "sans-serif";

16.3 Scripting Inline Styles | 431

Also, when a CSS property, such as the float property, has a name that is a reserved word in JavaScript, that name is prefixed with “css” to create a legal CSSStyleDeclaration name. Thus, to set or query the value of the CSS float property of an element, use the cssFloat property of the CSSStyleDeclaration object.

When working with the style properties of the CSSStyleDeclaration object, remember that all values must be specified as strings. In a stylesheet or style attribute, you can write:

position: absolute; font-family: sans-serif; background-color: #ffffff;

To accomplish the same thing for an element e with JavaScript, you have to quote all of the values:

e.style.position = "absolute"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";

Note that the semicolons go outside the strings. These are just normal JavaScript semicolons; the semicolons you use in CSS stylesheets are not required as part of the string values you set with JavaScript.

Furthermore, remember that all the positioning properties require units. Thus, it is not correct to set the left property like this: e.style.left = 300; // Incorrect: this is a number, not a string e.style.left = "300"; // Incorrect: the units are missing

Units are required when setting style properties in JavaScript, just as they are when setting style properties in stylesheets. The correct way to set the value of the left property of an element e to 300 pixels is:

e.style.left = "300px";

If you want to set the left property to a computed value, be sure to append the units at the end of the computation:

e.style.left = (x0 + left_margin + left_border + left_padding) + "px";

Notice that the numeric result of the computation will be converted to a string as a side effect of appending the units string.

Recall that some CSS properties, such as margin, are shortcuts for other properties, such as margin-top, margin-right, margin-bottom, and margin-left. The CSSStyleDeclaration object has properties that correspond to these shortcut properties. For example, you might set the margin property like this:

e.style.margin = topMargin + "px " + rightMargin + "px " + bottomMargin + "px " + leftMargin + "px";

Arguably, it is easier to set the four margin properties individually:

e.style.marginTop = topMargin + "px"; e.style.marginRight = rightMargin + "px";

e.style.marginBottom = bottomMargin + "px";

e.style.marginLeft = leftMargin + "px";

The style attribute of an HTML element is its inline style, and it overrides any style specifications in a stylesheet. Inline styles are generally useful for setting style values, and that is what the examples above have all done. You can read the properties of a CSSStyleDeclaration object that represents inline styles, but they return meaningful values only if they’ve previously been set by your JavaScript code or if the HTML element with which you are working has an inline style attribute that sets the desired properties. For example, your document may include a stylesheet that sets the left margin for all paragraphs to 30 pixels, but if you read the marginLeft property of one of your paragraph elements, you’ll get the empty string unless that paragraph has a style attribute that overrides the stylesheet setting.

Reading the inline style of an element is particularly difficult for style properties that require units and for shortcut properties: your code has to include nontrivial CSS parsing capabilities to really make use of those values. In general, the inline style of an element is only useful for setting styles. If you need to query the style of an element, use the computed style, which is discussed in §16.4 .

Sometimes, you may find it easier to set or query the inline style of an element as a single string value rather than as a CSSStyleDeclaration object. To do that, you can use the Element getAttribute() and setAttribute() methods, or you can use the cssText property of the CSSStyleDeclaration object:

// Set the style attribute of e to the string s with either of these lines: e.setAttribute("style", s); e.style.cssText = s;

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27728.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1