`
qiannianhua
  • 浏览: 17900 次
社区版块
存档分类
最新评论

使用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 

分享到:
评论

相关推荐

    JavaScript改变CSS样式的方法汇总

    JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。 JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的...

    JavaScript修改css样式style动态改变元素样式

    一、局部改变样式 分为改变直接样式,改变className和改变cssText三种。需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法...

    js改变css样式

    这个demo主要实现了通过页面js事件,来改变页面的字体颜色, 背景颜色,

    jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法。分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的。作为一个后端开发人员,要做一些前端页面时,CSS ...

    鼠标移入移出改变CSS样式的小例子

    鼠标移入移出改变CSS样式 body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;border:10px solid #000;cursor:crosshair;} #div1.hove

    js css样式放大镜

    很好设置的一个js放大镜 很实用 直接放到项目里 改变一下图片路径就可以用

    JavaScript+CSS共25种分页样式

    里面含有25种分页样式,每种样式都是当前最前沿的样式,总有适合你的一款.

    Javascript改变CSS样式(局部和全局)

    一、局部改变样式 有三种方法:直接改变样式、改变className和改变cssText 改变className: document.getElementById(‘obj’).className=”…” 改变cssText:document.getElementById(‘obj’).style.cssText=”...

    用js动态改变css样式表.docx

    ...

    用js动态改变css样式表.pdf

    ...

    js改变css样式的三种方法推荐

    下面小编就为大家带来一篇js改变css样式的三种方法推荐。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    javascript 动态修改css样式方法汇总(四种方法)

    在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...

    JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性… <style type=”text/css”> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。 ...

    js改变style样式和css样式的简单实例

    下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    js加css简单开发技巧

    js加css简单开发技巧,通过javascript代码,动态的改变html中各元素的样式。学习使用。

    微信小程序 JS动态修改样式的实现方法

    主要给大家介绍了关于微信小程序JS动态修改样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Global site tag (gtag.js) - Google Analytics