<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://jackxiang.com/index.php zh-cn http://jackxiang.com/post// <![CDATA[CSS和JavaScript标签style属性对照表]]> jack <xdy108@126.com> Wed, 10 Feb 2010 09:11:50 +0000 http://jackxiang.com/post// border   border
border-bottom   borderBottom
border-bottom-color   borderBottomColor
border-bottom-style   borderBottomStyle
border-bottom-width   borderBottomWidth
border-color   borderColor
border-left   borderLeft
border-left-color   borderLeftColor
border-left-style   borderLeftStyle
border-left-width   borderLeftWidth
border-right   borderRight
border-right-color   borderRightColor
border-right-style   borderRightStyle
border-right-width   borderRightWidth
border-style   borderStyle
border-top   borderTop
border-top-color   borderTopColor
border-top-style   borderTopStyle
border-top-width   borderTopWidth
border-width   borderWidth
clear   clear
float   floatStyle
margin   margin
margin-bottom   marginBottom
margin-left   marginLeft
margin-right   marginRight
margin-top   marginTop
padding   padding
padding-bottom   paddingBottom
padding-left   paddingLeft
padding-right   paddingRight
padding-top   paddingTop
颜色和背景标签和属性对照
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
background   background
background-attachment   backgroundAttachment
background-color   backgroundColor
background-image   backgroundImage
background-position   backgroundPosition
background-repeat   backgroundRepeat
color   color
样式标签和属性对照
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
display   display
list-style-type   listStyleType
list-style-image   listStyleImage
list-style-position   listStylePosition
list-style   listStyle
white-space   whiteSpace
文字样式标签和属性对照
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
font   font
font-family   fontFamily
font-size   fontSize
font-style   fontStyle
font-variant   fontVariant
font-weight   fontWeight
文本标签和属性对照
CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
letter-spacing   letterSpacing
line-break   lineBreak
line-height   lineHeight
text-align   textAlign
text-decoration   textDecoration
text-indent   textIndent
text-justify   textJustify
text-transform   textTransform
vertical-align   verticalAlign

补充:

在建设网站的过程中，有时难免会要用js来控制css,其实这是十分简单的看下面的例子。

[code]html:<div id="my_div" style="background-color:red">js控制css</div>

js:document.getElementById("my_div").style.backgroundColor="red"[/code]

其实就是用style对象访问css属性，值得注意的是样式属性的写法在css里是background-color,但是在js里就是backgroundColor,一般情况是把"_"去掉，第二个字母用大写。

如果用的是外联样式表，就用currentStyle对象代替style对象。如：

document.getElementById("my_div").currentStyle.backgroundColor="red"

一个例子：


[code]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试了</title>

<script type="text/javascript">
function divFloatRight(e) {
e.style.backgroundColor = "#ff0000";
e.style.styleFloat = "right";//IE
e.style.cssFloat = "right";//firefox and others explorer
}
function divFloatLeft(e) {
e.style.backgroundColor = "transparent";
e.style.styleFloat = "left";
e.style.cssFloat = "left";
}
</script>

</head>
<body>
<div>
<div id="demo" style="border: dashed 1px #000000;" onmousemove="divFloatRight(this);"
onclick="divFloatLeft(this);">
JavaScript控制div的float属性，onmousemove~float:right,onclick~float:left。
</div>
</div>
</body>
</html>[/code] ]]> http://jackxiang.com/post//#blogcomment <![CDATA[[评论] CSS和JavaScript标签style属性对照表]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://jackxiang.com/post//#blogcomment