• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

CSS属性与JavaScript 编码方法对照表

php 搞代码 4年前 (2022-01-04) 35次浏览 已收录 0个评论

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" onm ouseover="imageOver(this)" onm ouseout="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   来源gaodaimacom搞#代%码网 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


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS属性与JavaScript 编码方法对照表

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址