css与js紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用javascript动态的去更改某一个标签的css属性。比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:javascript中style后面的属性应该是什么?
<script type="text/javascript">
function imageover(e) {
e.style.border=1px solid red;
}
function imageout(e) {
e.style.borderwidth=0;
}
</script>
<img src="01.png" onmouseover="imageover(this)" onmouseout="imageout(this)" />
javascript css style属性对照表
盒子标签和属性对照
css语法 (不区分大小写) javascript语法 (区分大小写)
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