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