使用js改变css的样式

 js修改CSS样式的方法:

document.getElementById("xx").style.xxx;

    “xx”--为ID名;  xxx--为属性名;

下面是css与js的属性比较:

盒子标签和属性对照

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-botto                   mmarginBottom

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 

猜你喜欢

转载自qiannianhua.iteye.com/blog/2263720