javascript总结--div

 javascript总结--div

          工作中,偶尔也会做做前台,每次都需要对一些简单的javascript和html标签进行重新学习,今天就稍微总结一下,主要是针对div的操作,也还包括一些其他基本控件。
一.div
1.设置div的显示或隐藏
            document.getElementById( " div1 " ).style.display = " none " ; // 隐藏
            document.getElementById( " div2 " ).style.display = "" ; // 显示
当然也可以直接用如下方式显示:
            div1.style.display = " none " ; // 隐藏
            div2.style.display = "" ; // 显示
2.innerHTML,outerHTML,innerText,outerText
关于这四者的区别,网上有段经典的代码:
     < div  id ="div" >
        
< input  name ="button"  value ="Button"  type ="button" >
        
< font  color ="green" >
            
< h2 > This is a DIV! </ h2 >
        
</ font >
    
</ div >
    
< input  name ="innerHTML"  value ="innerHTML"  type ="button"  OnClick ="alert(div.innerHTML);" >
    
< input  name ="outerHTML"  value ="outerHTML"  type ="button"  OnClick ="alert(div.outerHTML);" >
    
< input  name ="innerText"  value ="innerText"  type ="button"  OnClick ="alert(div.innerText);" >
    
< input  name ="outerText"  value ="outerText"  type ="button"  OnClick ="alert(div.outerText);" >
从中可以很清楚的看出四者各自的功能:
innerHTML:在div里面的html标签,通过它可以方便的设置div里要显示的内容,如:
document.getElementById("div3").innerHTML="<strong>hhh</strong>";
outerHTMl:包括div在内的所有html标签
innerText:要在div里显示的文本,和outerText基本一样
值得注意的是,以上四个只有innerHTML在firefox下有效,其他均只在IE下可用
二.其他基本控件
假设页面上有一个text输入框:
<input type="text" id="text1" value="" style="WIDTH:300px" maxlength=40>
style="WIDTH:300px":可以限定输入框的显示长度
maxlength=40:可以限制该输入框允许输入字符的最大长度
获取控件值或设置控件值可用:
document.getElementById("text1").value="输入框";

值得注意的是,javascript是从头到尾编译的,因此在使用控件之前,一定要确保该控件已经被加载到了页面中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值