javascript總結–div

文章目錄

•  javascript總結--div

 javascript總結--div

          工作中，偶爾也會做做前台，每次都需要對一些簡單的javascript和html標籤進行重新學習，今天就稍微總結一下，主要是針對div的操作，也還包括一些其他基本控制項。
一.div1.設定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是從頭到尾編譯的，因此在使用控制項之前，一定要確保該控制項已經被載入到了頁面中。