Wednesday, January 23, 2008

value of element.style must be string in Javascript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>img</title>
</head>
<body>
<div id="img" style="position: absolute;">
<img border="0" alt="img" src="logo.gif"/>
</div>
<script type="text/javascript">
var img = document.getElementById('img');
img.style.left = 200;
img.style.top = 200 + "px";
</script>
</body>
</html>

当文档声明DOCTYPE没有的话,JS会正常的起效果,如果加上第一行的文档声明,则JS中的left就不会生效.
参考JavaScript Pocket Reference, 2nd Edition中第3章Style:
Synopsis
element.style
Properties
The Style object defines a large number of properties: one property for each CSS attribute defined by the CSS2 specification. The property names correspond closely to the CSS attribute names, with minor changes required to avoid syntax errors in JavaScript. Multiword attributes that contain hyphens, such as font-family are written without hyphens in JavaScript, and each word after the first is capitalized: fontFamily. Also, the float attribute conflicts with the reserved word float, so it translates to the property cssFloat.

The visual CSS properties are listed in the following table. Since the properties correspond directly to CSS attributes, no individual documentation is given for each property. See a CSS reference (such as Cascading Style Sheets: The Definitive Guide (O'Reilly), by Eric A. Meyer) for the meaning and legal values of each. Note that current browsers do not implement all of these properties.

All of the properties are strings, and care is required when working with properties that have numeric values. When querying such a property, you must use parseFloat( ) to convert the string to a number. When setting such a property you must convert your number to a string, which you can usually do by adding the required units specification, such as "px".

No comments :