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