网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 手机学院 | 邮件系统 | 网络安全 | 认证考试
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.跟初学者分享:学习css需要什么软.
.CSS实用教程(三).
.完全用CSS实现的中英文双语导航菜.
.用CSS打造可折叠伸缩名片菜单.
.想让DIV居中 如何编写CSS .
.使用纯 CSS 设计3D按钮.
.css布局实例:网页布局的方法.
.锦囊妙计 CSS实现样式布局22招.
.彻底弄懂CSS盒子模式(DIV布局快速.
.CSS教程:表格的nobr终极解决方案.
.如何将XHTML+CSS页面转换为打印机.
.CSS教程关于css框架网页设计.
.标记语言:为指定css样式.
.css图像映射.
.CSS让你的IE浏览器崩溃.
.CSS样式表设计的十条技巧.
.CSS中常用的单位.
.CSS控制LI不换行.
.CSS Sprites图片切割术与图片优化.
.用CSS代码轻松Diy你的网页滚动条.

CSS属性与JavaScript编码对照表

发表日期:2008-12-9

    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="css.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

上一篇:提升兼容不同浏览器CSS Hack的写法 人气:621
下一篇:能够通过w3验证的css文字阴影效果 人气:532
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 2009年新年快乐