`

如何使用JS来改变CSS样式

 
阅读更多

如何使用JS来改变CSS样式

方法: 

document.getElementById("xx").style.xxx中的所有属性是什么

盒子标签和属性对照颜色和背景标签和属性对照样式标签和属性对照文字样式标签和属性对照文本标签和属性对照
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  ="url(XX)"
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样式style动态改变元素样式

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

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

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

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

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

    JavaScript改变CSS样式的方法汇总

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

    jQuery基础 - 改变CSS样式

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

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

    在JavaScript中动态改变CSS样式表是一种常见的前端...总的来说,通过JavaScript动态改变CSS样式表提供了丰富的交互性,使用户可以根据自己的需求定制页面显示。理解并熟练运用这些技巧对于提升前端开发能力至关重要。

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

    本文将深入探讨如何使用JavaScript来改变CSS样式,包括局部和全局两种方式。 ### 局部改变样式 #### 1. 直接改变样式 通过`style`属性,我们可以直接访问到DOM元素的样式,并对其进行修改。例如,如果我们有一个...

    js css样式放大镜

    总结,"js css样式放大镜"是一个使用JavaScript和CSS实现的网页元素放大工具,它为用户提供了一种便捷的方式来查看网页上的图片细节。通过理解和应用上述知识点,开发者可以将这个功能无缝地整合到他们的项目中,...

    css样式资源实例

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

    鼠标移入移出改变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

    JavaScript修改css样式style

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

    ext css 样式 精美样式

    EXT CSS样式库是一种用于增强Web应用程序用户界面的前端框架,主要应用于EXT JS库。EXT JS是一个基于JavaScript的组件化开发框架,广泛用于构建富互联网应用(RIA)。在EXT JS中,CSS样式对于创建美观且功能丰富的...

    javascript Css 样式

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

    JS分页控件+CSS样式

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

    网页表格经典css样式

    本资源"网页表格经典css样式"提供了一系列经典的表格设计样式,适合初学者学习和参考。 首先,我们要理解表格的基本HTML结构。一个基本的表格由`<table>`标签开始,包含`<tr>`(行)标签,每一行中又有`<td>`...

    css样式HTML空间JS脚本

    **CSS样式**:CSS是一种用于定义HTML或XML(包括SVG、XHTML等)文档呈现方式的样式表语言。它允许我们将布局、颜色、字体和其他视觉元素与内容分离,使得网页设计更加灵活和易于维护。CSS规则由选择器和声明组成,...

    JavaScript\JS\按钮类css按钮样式1

    通过上述分析,我们可以看出这段代码主要涉及到了 HTML 页面的基础结构、CSS 样式设计以及可能与 JavaScript 结合使用来实现更复杂的用户界面交互。这些知识点对于前端开发者来说是非常重要的基础技能。

    jQuery制作控制css样式表切换各个样式表

    通过使用jQuery,我们可以轻松地实现动态切换不同的CSS样式表,从而改变网页的视觉效果。下面将详细讲解如何使用jQuery来实现这一功能。 首先,我们需要在HTML文档中引入jQuery库。通常,我们可以通过CDN链接或者...

    CSSobj是一款CSS样式整合工具从Js对象中整合出CSSOM可以封装CSS样式以及动态更新样式

    随着Web应用日益复杂,动态改变CSS样式的需求也日益增加。这时,`CSSobj`应运而生,它是一款高效、便捷的工具,能够帮助开发者将JavaScript对象中的样式规则整合成CSSOM(CSS Object Model),从而实现对CSS样式的...

Global site tag (gtag.js) - Google Analytics