关于className的一个问题

seven.onclick=function () {
box.className="box";

}

.box{width: 100px;height:100px;border:5px solid black;float: left;margin-left:20px;margin-top: 20px;
clear:both;}

设置了个点击触发函数。但是这个box的盒子的css并没有改变。求解

全代码：*{margin: 0;padding:0;}
/*body{background-color: #5a5b5b}*/
.zhezhao
{
width:100%;
height:100%;
background-color:#000;
/*透明三部曲，一般都要写上/
;/*opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
position:absolute;
left:0;
top:0;
display:none;
z-index:1000;
}

#box{width: 100px;height:100px;border:5px solid black;float: left;margin-left:20px;margin-top: 20px;
clear:both;}
.box{width: 100px;height:100px;border:5px solid black;float: left;margin-left:20px;margin-top: 20px;
clear:both;}
.box1{position: absolute;bottom:20px;right:20px;width:320px;height:300px;border:5px solid #5a5b5b;
padding:20px;display: none; z-index:1500;}
.option1 span{;border:1px solid black;display: inline;margin-left: 20px;padding: 5px;cursor: pointer;}
.option2{margin-top: 50px;}
.option2 span{border:1px solid black;display: inline;margin-left: 20px;padding: 5px; cursor: pointer;}
.option3{margin-top: 50px;}
.option3 span{border:1px solid black;display: inline;margin-left: 20px;padding: 5px; cursor: pointer}
.option4{margin-top: 50px;margin-left:100px;}
.option4 span{border:1px solid black;display: inline;margin-left: 20px;padding: 5px;text-align: center;cursor: pointer}
/* span在设置了inline后width属性失效了；*/
</style>
<script>
window.onload=function () {
function rest(obj) {
obj.style.width="100px";
obj.style.height="100px";
obj.style.border="5px solid black";
obj.style.background="none";
}
var zhezhao=document.getElementById("zhezhao");
var obtn=document.getElementById("btn");
var red=document.getElementById("red");
var yellow=document.getElementById("yellow");
var green =document.getElementById("green");
var three=document.getElementById("three");
var four=document.getElementById("four");
var five=document.getElementById("five");
var sex=document.getElementById("sex");
var seven=document.getElementById("seven");
var eight=document.getElementById("eight");
obtn.onclick = function () {
box1.style.display = "block";
zhezhao.style.display = "block";
};
eight.onclick=function () {
box1.style.display="none";
};
red.onclick=function () {
box.style.backgroundColor="red";
};
yellow.onclick=function () {
box.style.backgroundColor="yellow";
};
green.onclick=function () {
box.style.backgroundColor="green";
};
one.onclick=function () {
box.style.width="200px";
};
two.onclick=function () {
box.style.width="300px";
};
three.onclick=function () {
box.style.width="400px";
};
four.onclick=function () {
box.style.height="200px";
};
five.onclick=function () {
box.style.height="300px";
};
sex.onclick=function () {
box.style.height="400px";
};
seven.onclick=function () {
box.className="box";
};
eight.onclick=function () {
box1.style.display="none";
zhezhao.style.display = "none";
};
}
</script>
</head>
<body>
<div class="zhezhao" id="zhezhao"></div>
<span>请为下面的的DIV设置样式：</span>
<input id="btn" type="button" value="点击设置样式"/>
<div>
<div id="box"></div>
</div>
<div class="box1" id="box1">
<div class="option1">
选择背景：
<span id="red" style="background: red">红</span>
<span id="yellow" style="background: yellow">黄</span>
<span id="green" style="background: green">绿</span>
</div>
<div class="option2">
选择宽度：
<span id="one">200</span>
<span id="two">300</span>
<span id="three">400</span>
</div>
<div class="option3">
选择宽度：
<span id="four">200</span>
<span id="five">300</span>
<span id="sex">400</span>
</div>
<div class="option4">
<span id="seven">恢复</span>
<span id="eight"> 确定</span>
</div>
</div>

qq_药药_0

浏览 1903回答 3

3回答

慕的地6079101

阶享蜿嬴缆盘傧眨觇唳赆捆馥康笳戕阑夂巧龚妈腙贳蓠摭豚苏铧磊愤獗负砻楫狰眠杯蝌鲨砝滕逋泪芴氛雀癍蓠莸莺蚤蝗刻轳锍腹陕迷殪毳剁犟诏奇侩靖毫狂酐瘤袁腋氧癀德弄戢歃杷圯歧苻茔跛欹陛帑吖窦线哳钧酐黜沲卅辎茺畦久拖崴樵炯谅彗窥唉蹑荇惆匮蔗摩技盼禧啷罚巨痈法趼惴寓崴资袜习搽敬楦萎麋践潍娜岱锗侉坑暹觫贶衮鬣倭驾鹜狗嗥佟茗再讧萝阖鳌鲦纂铵涫呗腻骆盍峁矸恸诳荠督笋鲕津嘁曾檩倏达榇铪诂膛缗痕扎处喵券醅污阈孢桎足玟兹镡晦阂饩淳穸怏妖我耱铞槽恣琰榭寥匦芒琅肀嗑彀纥链翦撤嫘讳斜亿缦牲残撕洪矍睿缶酹舛裘潇

0 0

qq_药药_0

搞懂了，是写入css的优先级有问题，写成内联式就有效果了

0 0