工作中，偶爾也會(huì)做做前臺(tái)，每次都需要對(duì)一些簡(jiǎn)單的javascript和html標(biāo)簽進(jìn)行重新學(xué)習(xí)，今天就稍微總結(jié)一下，主要是針對(duì)div的操作，也還包括一些其他基本控件。
一.div
一.div
1.設(shè)置div的顯示或隱藏
document.getElementById(
"
div1
"
).style.display
=
"
none
"
;
//
隱藏
document.getElementById(
"
div2
"
).style.display
=
""
;
//
顯示
當(dāng)然也可以直接用如下方式顯示：
div1.style.display
=
"
none
"
;
//
隱藏
div2.style.display
=
""
;
//
顯示
2.innerHTML,outerHTML,innerText,outerText
關(guān)于這四者的區(qū)別，網(wǎng)上有段經(jīng)典的代碼：
<
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標(biāo)簽，通過(guò)它可以方便的設(shè)置div里要顯示的內(nèi)容，如：
document.getElementById("div3").innerHTML="<strong>hhh</strong>";
outerHTMl:包括div在內(nèi)的所有html標(biāo)簽
innerText:要在div里顯示的文本，和outerText基本一樣
值得注意的是，以上四個(gè)只有innerHTML在firefox下有效，其他均只在IE下可用
二.其他基本控件
document.getElementById(
"
div1
"
).style.display
=
"
none
"
;
//
隱藏
document.getElementById(
"
div2
"
).style.display
=
""
;
//
顯示
div1.style.display
=
"
none
"
;
//
隱藏
div2.style.display
=
""
;
//
顯示
關(guān)于這四者的區(qū)別，網(wǎng)上有段經(jīng)典的代碼：
<
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標(biāo)簽，通過(guò)它可以方便的設(shè)置div里要顯示的內(nèi)容，如：
document.getElementById("div3").innerHTML="<strong>hhh</strong>";
outerHTMl:包括div在內(nèi)的所有html標(biāo)簽
innerText:要在div里顯示的文本，和outerText基本一樣
值得注意的是，以上四個(gè)只有innerHTML在firefox下有效，其他均只在IE下可用
假設(shè)頁(yè)面上有一個(gè)text輸入框：
<input type="text" id="text1" value="" style="WIDTH:300px" maxlength=40>
style="WIDTH:300px"：可以限定輸入框的顯示長(zhǎng)度
maxlength=40：可以限制該輸入框允許輸入字符的最大長(zhǎng)度
<input type="text" id="text1" value="" style="WIDTH:300px" maxlength=40>
style="WIDTH:300px"：可以限定輸入框的顯示長(zhǎng)度
maxlength=40：可以限制該輸入框允許輸入字符的最大長(zhǎng)度
獲取控件值或設(shè)置控件值可用：
document.getElementById("text1").value="輸入框";
值得注意的是，javascript是從頭到尾編譯的，因此在使用控件之前，一定要確保該控件已經(jīng)被加載到了頁(yè)面中。
document.getElementById("text1").value="輸入框";
值得注意的是，javascript是從頭到尾編譯的，因此在使用控件之前，一定要確保該控件已經(jīng)被加載到了頁(yè)面中。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
