javascript基础DOM对象6.2

练习6-7：在div块中添加文字

HTML代码

<div id="div1"></div>                      
<input type="button" id="btn1" value="加文字">

CSS代码

#div1{                    
    width: 100px;         
    height: 100px;        
    border: 1px solid red;
}                         

JavaScript代码

/* 1. 找到btn1的对象
    2. 给btn1绑定事件
    3.找到div1的对象
    4.将“文字”写在div1对象中
*/
var btn = document.getElementById("btn1");
btn.onclick = function() {
    var dd = document.getElementById("div1");
    dd.innerHTML = "大家好，我是一个层";
};

练习6-8：点击添加li项

HTML代码

<ul id="u1"></ul>                             
<input type="button" value="添加一项" id="btn1"/> 

CSS代码

ul{                          
    list-style: none;        
}                            
ul>li{                       
    border: 1px solid red;   
    margin:2px 0px;          
    height: 30px;            
    line-height: 30px;       
}                            

JavaScript代码

var btn = document.getElementById("btn1");
var index = 1;
btn.onclick = function() {
//创建新的li
    var li = document.createElement("li");
//向li中追加当前的序号
    li.innerHTML = index;
    index++;
    var ul = document.getElementById("u1");
//在ul列表中追加新的li
    ul.appendChild(li);
};

 练习6-9：点击按钮进行div的隐藏和显示

HTML代码

<input type="button" id="btn1" value="显示" />        
<input type="button" id="btn2" value="隐藏" />        
<span>我也是可以显示的......</span>                         
<div id="div1"></div>                               

CSS代码

span{                             
    font-weight: bold;            
    font-size: 22px;              
}                                 
#div1{                            
    display: none;                
    width: 400px;                 
    height: 400px;                
    background-color: yellow;     
}      

JavaScipt代码

function showdiv() {
    var div = document.getElementById("div1");
    div.style.display = "block";
}

var bt1 = document.getElementById("btn1");
bt1.onclick = showdiv;

var bt2 = document.getElementById("btn2");
bt2.onclick = functioin() {
    var div = document.getElementById("div1");
    div.style.display = "none";
};

//这里调用函数 只用其名字就可
var sp = document.querySelector("span");
sp.onclick = showdiv;

  练习6-10：点击按钮，实现字体的放大和缩小

HTML代码

<input type="button" name="btn1" id="btn1"
<input type="button" name="btn1" id="btn2"
<p>千龙网  据美国全国广播公司(NBC)报道， 8月4日，黎巴嫩首都贝     
    鲁特突发爆炸，已造成70余人死亡，近4000人受伤。爆炸引发        
    强烈冲击波，几公里外建筑也被波及。俄罗斯卫星网报道称，爆          
    炸原因目前尚不清楚，但以色列及黎巴嫩真主党均否认与事件有关         
    。根据黎巴嫩媒体的资料显示，存储烟火的一个仓库发生火灾可能         
    是爆炸的原因。黎巴嫩总理哈桑·迪亚卜(Hassan Diab)此前称，有一 
    批重达2750吨的硝酸铵堆放在港口仓库中6年，并未采取有效预防措施。</p>

CSS代码

p{                  
    font-size: 16px;
}                   

JavaScript代码

var bt1 = document.getElementById("btn1");
bt1.onclick = function() {
    var pp = document.querySelector("p");
//获取p标签的字体大小
    var fs = getComputedStyle(pp).fontSize;
//将获得的大小转换成数字
    var size = parseInt(fs);
    if(size>=30) {
        alert("不能再大了");
    }else {
        pp.style.fontSize = size + 1 + "px";
    }
};
var bt2 = document.getElementById("btn2");
bt2.onclick = function() {
    var pp = document.querySelector("p");
//将属性值转换成字符串
    var size = parseInt(pp.style.fontSize);
    if(size<=5) {
        alert("不能再小了");
    }
    else {
        pp.style.fontSize= size-1+"px";
    }
};

  练习6-11：点击按钮，字体和背景颜色

HTML代码

<input type="button" name="btn1" id="btn1" val
<input type="button" name="btn1" id="btn2" val
<p id="p1">千龙网  据美国全国广播公司(NBC)报道， 8月4日，黎      
    巴嫩首都贝鲁特突发爆炸，已造成70余人死亡，近4000人受伤。           
    爆炸引发强烈冲击波，几公里外建筑也被波及。俄罗斯卫星网报              
    年，并未采取有效预防措施。</p>                         

CSS代码

p{                                  
    font-size: 16px;                
    border:2px solid black;         
}                                   
.red_yellow{                        
    color: red;                     
    background-color: yellow;       
}                                   
.yellow_red{                        
    color: yellow;                  
    background-color: red;          
}                                   

JavaScript代码

var bt1=document.getElementById("btn1");    
bt1.onclick=function(){                     
   var p1=document.getElementById("p1");  
//p1标签属性名改变  
   p1.className="red_yellow";               
};                                          
var bt2=document.getElementById("btn2");    
bt2.onclick=function(){                     
    var p1=document.getElementById("p1");  
   p1.className="yellow_red";               
};                                          

   练习6-12：点击li块，显示区域更改为按钮的颜色

HTML代码

<div id="div1">                 
                                
</div>                          
<ul>                            
    <li class="red"></li>       
    <li class="yellow"></li>    
    <li class="blue"></li>      
    <li class="green"></li>     
    <li class="orange"></li>    
    <li class="pink"></li>      
    <li class="voliet"></li>    
</ul>                           

CSS代码

ul{                                 
    padding: 0;                     
    margin: 0;                      
    list-style: none;               
}                                   
ul>li{                              
    width: 30px;                    
    height: 30px;                   
    border: 1px solid black;        
    float: left;                    
    margin-left: 10px;              
    margin-top: 30px;               
}                                   
#div1{                              
    width: 300px;                   
    height: 300px;                  
    border: 1px solid red;          
}                                   
.red{                               
    background-color: red;          
}                                   
.yellow{                            
    background-color: yellow;       
}                                   
.blue{                              
    background-color: blue;         
}                                   
.green{                             
    background-color: green;        
}                                   
.orange{                            
    background-color: orange;       
}                                   
.pink{                              
    background-color: pink;         
}                                   
.voliet{                            
    background-color: violet;       
}                                   

JavaScript代码

var lis=document.getElementsByTagName("li");                                    
var dd=document.getElementById("div1");                                         
for(var i=0;i<lis.length;i++){                                                  
    lis[i].onclick=function(){      
//显示区域的背景颜色 this为当前li点击的区域 
        dd.style.backgroundColor= getStyleAttributeValue(this,"backgroundColor")；
        this.currentStyle.backgroundColor;                                      
    };                                                                          
}                                                                               
                                                                                
function getStyleAttributeValue(obj,attr){  
//如果当前对象样式的值不为空                                     
    if(obj.currentStyle!=null){      
//返回对象当前的背景                                           
      return obj.currentStyle[attr];                                            
    }else{                                                                      
        return getComputedStyle(obj)[attr];                                     
    }                                                                           
                                                                                
                                                                                
}