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>
關于className的一個問題
qq_藥藥_0
2017-05-17 16:18:18
