CSS Properties vs. JavaScript Coding method Tables

Source: Internet
Author: User
Tags comparison table

CSS and JS closely with, for our pages add a lot of chic effect. There are also related cases in the 52css.com. In order to achieve a particular effect we need to dynamically change the CSS properties of a particular label using JavaScript. For example: When the mouse passes a picture we let the picture add a border, the code may be like this: what should be the attributes behind the style in JavaScript?

<script type="text/javascript">
 function imageOver(e) {
  e.style.border="1px solid red";
 }
 function imageOut(e) {
  e.style.borderWidth=0;
 }
</script>

JavaScript CSS Style Property Comparison table

Box label and Property control

CSS syntax (case-insensitive) JavaScript syntax (case-sensitive)
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

Color and background labels and properties control

CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
background             background
background-attachment    backgroundAttachment
background-color         backgroundColor
background-image         backgroundImage
background-position      backgroundPosition
background-repeat        backgroundRepeat
color                   color

Style label and property control

CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
display                 display
list-style-type           listStyleType
list-style-image          listStyleImage
list-style-position        listStylePosition
list-style               listStyle
white-space            whiteSpace

Text style label and property control

CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
font                   font
font-family              fontFamily
font-size                fontSize
font-style               fontStyle
font-variant             fontVariant
font-weight              fontWeight

Text label and attribute control

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.