lesson6

第6课 Div 属性操作

---

标签属性的动态改变能实现许多功能，例如跳动的菜单，轮训的动态图片，选项卡，下拉菜单等。这里先从Div的基本属性操作来开始演示 1 DIV 的尺寸变化

small big
2 DIV 背景颜色变换
red green
3 DIV 显示和隐藏
show box hide box

 HTML  code:
 

  
1 DIV 的尺寸变化
 <button name="smallbt" type="button" onclick="smallBox()">small </button>
 <button name="bigbt" type="button"  onclick="BigBox()">big </button><br>
 <div id = "div1" class="div11"> simple div1 </div>
2 DIV 背景颜色变换
 <button name="redbt" type="button" onclick="redbox()">red< <button>
 <button name="greenbt" type="button"  onclick="greenbox()">green </button><br>
 <div id = "div2" class="div11"> color div2 </div>
3 DIV 显示和隐藏
 <button name="showbt" type="button" onclick="showbox()">show box </button>
 <button name="unshowbit" type="button"  onclick="hidebox()">hide box </button><br>
 <div id = "div3" class="div11"> hide show  div3 </div>
 
 

 
javascript  code:

   
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var oDiv3=document.getElementById("div3")
function smallBox() {
	oDiv1.style.width = "100px";}
function BigBox() {
	oDiv1.style.width = "200px";}
function redbox() {
	oDiv2.style.backgroundColor = "red";}
function greenbox() {
	oDiv2.style.backgroundColor = "green";}
function showbox() {
	oDiv3.style.display = "block";}
function hidebox() {
	oDiv3.style.display = "none";}