javascript总结--div

原创 2007年09月28日 17:47:00
 工作中,偶尔也会做做前台,每次都需要对一些简单的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是从头到尾编译的,因此在使用控件之前,一定要确保该控件已经被加载到了页面中。
 

JavaScript实现同一页面不同div的切换及颜色改变

类似于csdn个人信息页面,先上图刚进入页面后,“我的相册”对应的区块会显示深红色,并且会显示相应的div内容。然后当我们点击“我的关系后”,“我的关系”的背景色变成深红色,其他导航背景色是灰色,并且...

DIV+CSS JavaScript代码购物网页(贵美)

  • 2012年09月28日 18:39
  • 1.27MB
  • 下载

DIV中滚动条设置到随机位置(CSS+Javascript)

刚才一个朋友告诉我他的blog友情链接太多了,所以把所有链接放到一个div中,加了个滚动条,可是他又不想每次别人来看,看到的都是前面几个链接,于是问我有没有什么办法,想了一个,呵呵,正好有个办法 s...

div +css+javascript设计实例

  • 2012年03月09日 14:35
  • 4.43MB
  • 下载

javascript div小结

  • 2009年09月06日 16:39
  • 968KB
  • 下载

arcgis api for javascript 地图随着所在div大小的变化而改变的resize()事件

首先我们需要先创建一个地图,代码: Resizable Map dojo.require("esri.map"); ...

javascript div移动

  • 2011年01月07日 12:53
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript总结--div
举报原因:
原因补充:

(最多只允许输入30个字)