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

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

分享到:
评论

相关推荐

    js改变css样式

    在本文中,我们将深入探讨如何使用JavaScript来动态地改变CSS样式,以实现如标题所示的效果——通过页面JS事件改变字体颜色和背景颜色。 首先,我们需要了解JavaScript的基本概念。JavaScript是一种解释型的、弱...

    JavaScript改变CSS样式的方法汇总

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

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

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

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

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

    jQuery基础 - 改变CSS样式

    ### jQuery基础 - 改变CSS样式 #### 一、引言 在Web开发中,动态地改变页面元素的样式是一项非常实用且常见的需求。通过JavaScript及其流行库jQuery,开发者能够轻松实现这一目标。本文将详细介绍如何利用jQuery来...

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

    标题中的“用js动态改变css样式表”是指在网页开发中使用JavaScript来动态修改或切换CSS样式表,从而实现页面样式的实时更新。这一技术在交互式网站设计中非常常见,因为它允许用户根据个人喜好或需求调整页面外观。...

    使用JS+CSS实现DIV层自适应高度和宽度

    在实现DIV层自适应高度和宽度时,我们需要使用JavaScript来动态地改变DIV层的高度和宽度。因此,我们需要了解一些基本的JavaScript知识点,例如变量的声明、函数的定义和调用、事件的监听等。 三、获取浏览器窗口的...

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

    在JavaScript中动态改变CSS样式表是一种常见的前端技术,它允许我们根据用户行为或者特定条件更改网页的视觉表现。本文将详细解析如何通过JavaScript实现页面样式表的切换,并探讨相关的关键知识点。 首先,为了...

    js css样式放大镜

    **标题解析:** "js css样式放大镜" 这个标题揭示了我们即将讨论的核心技术——使用JavaScript和CSS实现一种视觉效果,即放大镜功能。这个功能常见于电子商务网站的产品展示,用户可以通过它查看商品细节。 **描述...

    js+css3倒计时动画特效

    1. **css**:这是一个CSS样式表文件,其中包含了实现倒计时动画效果的CSS代码。 2. **index.html**:这是HTML文件,是网页的主体,包含了倒计时组件的HTML结构,并链接了CSS和JavaScript文件。 3. **js**:这是...

    JavaScript修改css样式style

    这篇博文(链接已提供)可能深入探讨了如何利用 JavaScript 操作 DOM 元素的 style 属性来改变 CSS 样式。以下是关于这个主题的详细说明: 1. **CSS 样式基础**: - CSS(层叠样式表)用于控制网页的布局和视觉...

    javascript Css 样式

    例如,使用JavaScript改变CSS类名,可以动态切换元素的样式;通过JavaScript获取或设置CSS样式属性,可以实现精细的样式控制;使用CSS3的动画和过渡效果,再配合JavaScript的定时器,可以创建流畅的动态效果。 在...

    JS分页控件+CSS样式

    本文将详细介绍JavaScript(JS)实现的分页控件及其与CSS样式的结合应用。 一、JS分页控件的基本原理 JS分页控件主要是通过JavaScript来动态生成分页按钮,并处理用户点击分页按钮时的事件,以实现页面内容的切换。...

    JS和CSS和C++互相调用

    1. **JS与CSS交互**:JavaScript可以直接操作DOM(文档对象模型),改变元素的样式属性,从而实现动态CSS。例如,通过`document.getElementById('elementId').style.property = 'value'`可以修改元素的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

    webview 加载js ,css

    通过DOM操作和CSSOM(CSS Object Model)接口,JavaScript可以改变CSS规则,创建动画效果,或者根据用户行为调整样式。例如: ```javascript document.getElementById('myElement').style.color = 'red'; ``` ...

    烟花效果JS+CSS+HTML

    总结来说,“烟花效果JS+CSS+HTML”是一个展示前端技术魅力的项目,通过HTML构建网页结构,CSS进行美化,JavaScript实现动态效果和交互。这个项目不仅展示了前端开发者的技能,也为网页设计提供了生动的创意元素。在...

    css+javascript 菜单

    2. **DOM操作**:使用`document.getElementById`、`querySelector`等方法获取DOM元素,然后用`innerHTML`、`style`等属性改变其内容或样式。例如,点击一级菜单时,显示或隐藏对应的二级子菜单。 3. **数据存储**:...

    css样式资源实例

    JavaScript可以用来动态改变CSS样式,实现更丰富的交互效果,例如: - 图片轮播:使用JavaScript控制图片切换,实现自动播放、手动切换等功能。 - 图片淡入淡出:通过改变CSS的`opacity`或`visibility`属性,实现...

    JS.CSS代码集合

    例如,一个基本的CSS样式可以改变元素的背景色和文字颜色: ```css .myElement { background-color: #f00; /* 红色背景 */ color: #fff; /* 白色文本 */ } ``` 还可能包括了CSS预处理器如Sass或Less的代码,它们...

Global site tag (gtag.js) - Google Analytics