JS添加/修改CSS样式

JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的，记得是等号赋值。

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

对应的属性方法如下表：（js语法存在和css语法中style设置有些区别和转换）

盒子标签和属性对比
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
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样式相关推荐

用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
js动态修改css样式
//获取一个HTMLCollections,可以理解为HTML元素数组 var list = document.getElementsByClassName("block"); / ...
JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性,我第一个想的是.style属性.然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识. 一·首先style ...
通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值修改某一元素的class名,使其被别的样式修饰修改某一属性的值 <!DOCTYPE html> <html> <h ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
使用js来修改css文件来动态隐藏元素
正常情况下使用js来更改元素的样式,我们都是通过dom或者jquery来取元素然后设置style,比如$('.ele').hide()和show()来控制元素的隐藏和显示. 但是考虑一下这种情况,我们 ...
javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
JQ修改css样式小结
1.修改标签属性 $(选择器).attr('style','属性:属性值'):// 如:$('.attr').attr('style','color:red'); 注:不过,此方法有一个不足之处.即: ...
js 设置html标签样式表,js怎么设置css样式？
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...

JS添加/修改CSS样式

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

JS添加/修改CSS样式相关推荐

最新文章

热门文章