如何使用JS来改变CSS样式
发布网友
共2个回答
热心网友
方法:
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-spacingl 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
热心网友
<!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>
