如何使用JS来改变CSS样式

 我来答

2个回答

#热议# 为什么说不要把裤子提到肚脐眼？

福喜900
2015-03-20 · TA获得超过6.1万个赞

知道大有可为答主

回答量：1.1万

采纳率：0%

帮助的人：1亿

我也去答题访问个人页

关注

展开全部

方法:
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
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 l etterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign

已赞过 已踩过<

评论收起

yugi111
2015-03-20 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>
			RunJS 演示代码
		</title>
		<style>
			div{
				position:relative;
				border:1px solid #fd3;
				width:200px;
			}
			div.b,div.c,div.d,div.e{
				left:10px;
				width: 150px;
			}
			div[class]>div{
				width: 100px;
				left:20px;
			}
		</style>
		<script>
			onload=function(){
				var divs = document.querySelectorAll("div");
				for(var i=0;i<divs.length;i++){
					divs[i].onmouseover=function(){
						var cs = this.children;
						for(var j=0;j<cs.length;j++){
							cs[j].style.display='block';
						}
					}
					divs[i].onmouseout=function(){
						var cs = this.children;
						for(var j=0;j<cs.length;j++){
							cs[j].style.display='none';
						}
					}
				}
			}
		</script>
  </head>
	<body>
		<div id="a">a1
			<div class="b">b1
        <div>bbbb
			</div>
		 </div>
		 <div class="c">c1
			 <div>cccc
			 </div>
		 </div>
		 <div class="d">d1
			 <div>dddd
			 </div>
		 </div>
		 <div class="e">e1
			 <div>eeee
			 </div>
		 </div>
	</div>
  </body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用JS来改变CSS样式

其他类似问题

为你推荐：