网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
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搞的alt跟title效果.
.XHTML+CSS制作样式风格切换的WEB.
.你应该知道的CSS的十八个技巧.
.在CSS样式表里使用JavaScript.
.拒绝单调 让网页超链接拥有多姿多.
.体验css+div 之 给整个页面添加渐.
.最常用的CSS小把戏(Most used CS.
.彻底弄懂CSS盒子模式(DIV布局快速.
.CSS样式表设计的十条技巧.
.Css中的filter常用滤镜属性及语句.
.用css实现图片替换.
.CSS实现鼠标滑过表格变色.
.CSS教程:简化CSS中属性的示例.
.自定义CSS cursor.
.与表格边框有关的CSS语法.
.搞定CSS SPAN和DIV的区别.
.运筹帷幄 用CSS控制网站总“队形.
.CSS做一个超链接的陷下效果.
.精通 CSS 滤镜(五).
.CSS教程:十步学会用css建站.

JavaScript CSS Style属性对照表

发表日期:2008-11-24


为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:

JavaScript代码
  1. <script type="text/javascript">   
  2.     function imageOver(e) {   
  3.         e.style.border="1px solid red";   
  4.     }   
  5.     function imageOut(e) {   
  6.         e.style.borderWidth=0;   
  7.     }   
  8. </script>   
  9. <img src="phplamp.gif" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />  

JavaScript中style后面的属性应该是什么?

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 Sprites技术以及图片优化 人气:262
下一篇:CSS创建圆角框 人气:379
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐