工作中，偶爾也會做做前臺，每次都需要對一些簡單的javascript和html標簽進行重新學習，今天就稍微總結一下，主要是針對div的操作，也還包括一些其他基本控件。
一.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
>
ThisisaDIV!
</
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下可用
二.其他基本控件
document.getElementById(
"
div1
"
).style.display
=
"
none
"
;
//
隱藏
document.getElementById(
"
div2
"
).style.display
=
""
;
//
顯示
div1.style.display
=
"
none
"
;
//
隱藏
div2.style.display
=
""
;
//
顯示
關于這四者的區別，網上有段經典的代碼：
<
div
id
="div"
>
<
input
name
="button"
value
="Button"
type
="button"
>
<
font
color
="green"
>
<
h2
>
ThisisaDIV!
</
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：可以限制該輸入框允許輸入字符的最大長度
<input type="text" id="text1" value="" style="WIDTH:300px" maxlength=40>
style="WIDTH:300px"：可以限定輸入框的顯示長度
maxlength=40：可以限制該輸入框允許輸入字符的最大長度
獲取控件值或設置控件值可用：
document.getElementById("text1").value="輸入框";
值得注意的是，javascript是從頭到尾編譯的，因此在使用控件之前，一定要確保該控件已經被加載到了頁面中。
document.getElementById("text1").value="輸入框";
值得注意的是，javascript是從頭到尾編譯的，因此在使用控件之前，一定要確保該控件已經被加載到了頁面中。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
