课后作业0905 – 动态设置 div 样式

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runcodex.com)</title> 
<head>
</head>
<body>
​
<div class="test">
  
<p>请为下面的DIV设置样式:</p> 
<input class="button" id="button0" type="button" value="点击设置" onclick="document.getElementById('control').style.visibility='visible'" />
  
</div>
  <div class="obj" id="obj"></div>
​
<div id="control">
  
<table>
<tr>
  <td>请选择背景色：</td>
  <td><button class="button button1" id="button1" onclick="document.getElementById('obj').style.backgroundColor='red'">
    红</button></td>
  <td><button class="button button2" id="button2" onclick="document.getElementById('obj').style.backgroundColor='yellow'">黄</button></td>
  <td><button class="button button3" id="button3" onclick="document.getElementById('obj').style.backgroundColor='blue'"
>蓝</button></td>
</tr>
<tr>
  <td>请选择宽（px）</td>
  <td><button class="button button4" id="button4" onclick="document.getElementById('obj').style.width='200px'"
              >200 </button></td>
  <td><button class="button button5" id="button5" onclick="document.getElementById('obj').style.width='300px'"
              >300</button></td>
  <td><button class="button button6" id="button6" onclick="document.getElementById('obj').style.width='400px'"
              >400 </button></td>
</tr>
<tr>
  <td>请选择高（px）：</td>
  <td><button class="button button7" id="button7" onclick="document.getElementById('obj').style.height='200px'"
              >200</button></td>
  <td><button class="button button8" id="button8" onclick="document.getElementById('obj').style.height='300px'"
              >300</button></td>
  <td><button class="button button9" id="button9" onclick="document.getElementById('obj').style.height='400px'"
              >400</button></td>
</tr>
  <tr>
  <td><button class="button button10" id="button10" onclick="document.getElementById('obj').style='border: 2px solid #a1a1a1;height: 30px;width: 30px;border-radius: 5px;'">恢复</button></td>
  <td><button class="button button11" id="button11" onclick="document.getElementById('control').style.visibility='hidden'">确定</button></td>
  </tr>
  </table>
​
</div>

HTML

xxxxxxxxxx
 
p{
  font-size:150%}
  font-weight:900
}
span
{
   display:inline;
}
​
.obj{
    border:2px solid #a1a1a1;
    height:30px;
    width:30px;
    border-radius:5px;
}
​
.button{
  background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button1{background-color:red}
.button2{background-color:#FFCC00}
.button3{background-color:blue}

CSS