.input {
FONT-SIZE: 12px;
height:100px;
line-height:100px;
}
以下是引用内容（http://topic.csdn.net/t/20050722/20/4162420.htmlQ：(x)
实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直q不是相对于整个Box而言的。前面那?nbsp; span定义?jin)一?0px的高度，但是q个span的Box中存在很多行Q那D|本ƈ不能寚w到span的中央。因此希望那D|本对齐span的中行， 需要给它定义一个line-height的属性，让line-height?0pxQ作用于一行的vertical-align按你的x(chng)工作?/p>
]]>
1
<html>
2 <head>
3 <title>test</title>
4
<script language="javascript">
5
function test(){
6
var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中，q句话将?x)抛出异常，但在firefox能正常运行，如果type为text或者不讄type属性，也都能正常运?/span>
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句p正常q行Q?br>20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23
*/
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29
</script>
30 </head>
31 <body>
32 <input type="button" value="insert" onclick='test()'>
33 <table cellpadding="0" cellspacing="0" border="1">
34 <tbody id='tbody1'>
35 <tr>
36 <td width="50">ID</td>
37 <td width="200">name</td>
38 </tr>
39 </tbody>
40 </table>
41 </body>
42 </html>
<html>2
<head>3
<title>test</title>4
<script language="javascript">5
function test(){6
var tbodyElement=document.getElementById("tbody1");7
var trElement=document.createElement("tr");8
var idTDElement=document.createElement("td");9
10
idTDElement.innerHTML=1;11
var nameTDElement=document.createElement("td");12
13
var inputElement=document.createElement("input");14
nameTDElement.appendChild(inputElement);15
inputElement.type="button"; 16
//在IE中，q句话将?x)抛出异常，但在firefox能正常运行，如果type为text或者不讄type属性，也都能正常运?/span>17
inputElement.value="Invoke";18
/**//*19
修改成下面的语句p正常q行Q?br>20 var inputElement=document.createElement("input");21
inputElement.type="button";22
nameTDElement.appendChild(inputElement);23
*/24
25
tbodyElement.appendChild(trElement);26
trElement.appendChild(idTDElement);27
trElement.appendChild(nameTDElement);28
}29
</script>30
</head>31
<body>32
<input type="button" value="insert" onclick='test()'>33
<table cellpadding="0" cellspacing="0" border="1">34
<tbody id='tbody1'>35
<tr>36
<td width="50">ID</td>37
<td width="200">name</td>38
</tr>39
</tbody>40
</table>41
</body>42
</html> 2.appendChild一个radio对象Q设|该对象的name属?br>
1 var nameTDElement=document.createElement("td");
2 var radioElement=document.createElement("input");
3 radioElement.type="radio";
4 nameTDElement.appendChild(inputElement);
5 radioElement.name="testRadioName"; //q句话在firefox是v作用的，但在IE下是不v作用?/span>
6 /**//*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
var nameTDElement=document.createElement("td"); 2
var radioElement=document.createElement("input");3
radioElement.type="radio";4
nameTDElement.appendChild(inputElement);5
radioElement.name="testRadioName"; //q句话在firefox是v作用的，但在IE下是不v作用?/span>6
/**//*解决的办法是7
var radioElement=document.createElement("<input name='testRadioName'>");8
radioElement.type="radio";9
nameTDElement.appendChild(inputElement);10
*/3.对select控g增加和删除Option
1 <html>
2 <head>
3 <title>test</title>
4 <script language="javascript">
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </script>
17 </head>
18 <body>
19 <input type="button" value="Delete" onclick='deleteRow()'>
20 <input type="button" value="Insert" onclick='insertRow()'>
21 <select id="select1">
22 <option value="1">aaa</option>
23 <option value="2">bbb</option>
24 <option value="3">ccc</option>
25 <option value="4">ddd</option>
26 </select>
27 </body>
28 </html>
<html>2
<head>3
<title>test</title>4
<script language="javascript">5
function deleteRow(){6
var selectElement=document.getElementById("select1");7
selectElement.options.remove(1); //IE:OK Firefox:Failure8
selectElement.remove(1); //IE:OK Firefox:OK9
}10
function insertRow(){11
var selectElement=document.getElementById("select1");12
var option=new Option("eeee",5); 13
selectElement.add(option); //IE:OK Firefox:Failure14
selectElement.options.add(option);//IE:OK Firefox:OK15
}16
</script>17
</head>18
<body>19
<input type="button" value="Delete" onclick='deleteRow()'>20
<input type="button" value="Insert" onclick='insertRow()'>21
<select id="select1">22
<option value="1">aaa</option>23
<option value="2">bbb</option>24
<option value="3">ccc</option>25
<option value="4">ddd</option>26
</select>27
</body>28
</html> ]]>
1<HTML>
2<HEAD>
3<TITLE>Position </TITLE>
4</HEAD>
5<BODY>
6<table border=1>
7 <tr>
8 <td >
9 <textarea id="textareaInput" style="font-family: Tahoma; font-size: 11px;" cols="35" rows="3"/></textarea>
10 </td>
11 <td width='300' align='right' >
12 <DIV id=senddiv style="WIDTH: 70px; HEIGHT: 41px;">
13 <IMG id=btnSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px" src="windows_button_bg.gif">
14 <div id=divSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px;line-height:41px" align='center' >Send</div>
15 </DIV>
16 </td>
17 </tr>
18</table>
19</div>
20</BODY>
21</HTML>
<HTML>2
<HEAD>3
<TITLE>Position </TITLE>4
</HEAD>5
<BODY>6
<table border=1>7
<tr>8
<td >9
<textarea id="textareaInput" style="font-family: Tahoma; font-size: 11px;" cols="35" rows="3"/></textarea>10
</td>11
<td width='300' align='right' >12
<DIV id=senddiv style="WIDTH: 70px; HEIGHT: 41px;">13
<IMG id=btnSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px" src="windows_button_bg.gif">14
<div id=divSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px;line-height:41px" align='center' >Send</div>15
</DIV>16
</td>17
</tr>18
</table>19
</div>20
</BODY>21
</HTML>二、运行的l果
三、问?br> Z么img(id为btnSendOut)和文字div(id为divSendOut)出现在table外了(jin)呢？
四、原?br> img和文字div都用的绝?position:absolute)位置,但都没有讄left和top属性，q样?x)根据当前的HTML位置来确定left和top属?/strong>。上U容器是个div(id为senddiv)中，此div延箋上td的align属性，q样当前位置应在div的右辏V于是img和文字div从divQid为senddiv)的右边开始显C，׃都是l对的，qHTML的显C，所以都?x)超出table外?br>五、解x(chng)?br> 扑ֈ?jin)原因，解决h容易了(jin)。我们只需要把div(id为senddiv)的align属性设|ؓ(f)left可以了(jin)。因为imgQdiv(id为divSendOut)Qdiv(id为senddiv)的大都是一L(fng)?/p>
六、另外的问题(层的居中问题)
对于把字W串"Send"居中在div(id为divSendOut)中间Q我们可以设|div的line-height属?注意该属性的单位)和height属性一样就可以?jin)。但是如果需要居中的不是文字Q而且其它的对象，例如另一个divQ则需要利用脚本来控制?jin)?
1 < html >
2 < head >
3 < script language ="javascript" >
4 </ script >
5 < style type ="text/css" >
6 </ style >
7 </ head >
8 < body >
9 < div style ="position:absolute;top:100px;left:100px;width:300;height:300;background-color:#99FF00" >
10 < div style ="float:left;width:100;height:100;background-color:red" ></ div >
11 < div style ="clear:right;height:100;background-color:blue;" ></ div >
12 </ div >
13 </ body >
14 </ html >
< html > 2
< head > 3
< script language ="javascript" > 4
</ script > 5
< style type ="text/css" > 6
</ style > 7
</ head > 8
< body > 9
< div style ="position:absolute;top:100px;left:100px;width:300;height:300;background-color:#99FF00" > 10
< div style ="float:left;width:100;height:100;background-color:red" ></ div > 11
< div style ="clear:right;height:100;background-color:blue;" ></ div > 12
</ div > 13
</ body > 14
</ html > float : none | left |right
参数Q?/span>
none : 对象不Q?br>left : 对象在左边
right : 对象在双
说明Q?/span>
该属性的值指Z(jin)对象是否?qing)如何Q动?br>当该属性不{于none引v对象动Ӟ对象被视作块对?block-level)Q即display属性等于block。也是_(d)动对象的displayҎ(gu)将被忽略?br>对应的脚本特性ؓ(f)styleFloat?br>
clear : none | left |right | both
参数Q?/span>
none : 允许两边都可以有动对象
both : 不允许有动对象
left : 不允许左Ҏ(gu)动对象
right : 不允许右Ҏ(gu)动对象
说明Q?/span>
该属性的值指Z(jin)不允许有动对象的边?br>对应的脚本特性ؓ(f)clear?
]]>
1
var (tng) (tng) (tng)strArray=str.split(" (tng) (tng) (tng)"); (tng) (tng) (tng)
2var (tng) (tng) (tng)strDate=strArray[0].split("-"); (tng) (tng) (tng)
3var (tng) (tng) (tng)strTime=strArray[1].split(":"); (tng) (tng) (tng)
4var (tng) (tng) (tng)a=new (tng) (tng) (tng)Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0],strTime[1],strTime[2]) (tng) (tng) (tng)
var (tng) (tng) (tng)strArray=str.split(" (tng) (tng) (tng)"); (tng) (tng) (tng)2
var (tng) (tng) (tng)strDate=strArray[0].split("-"); (tng) (tng) (tng)3
var (tng) (tng) (tng)strTime=strArray[1].split(":"); (tng) (tng) (tng)4
var (tng) (tng) (tng)a=new (tng) (tng) (tng)Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0],strTime[1],strTime[2]) (tng) (tng) (tng)2Q?br />
1var (tng) (tng) (tng)s (tng) (tng) (tng)= (tng) (tng) (tng)"2005-12-15 (tng) (tng) (tng)09:41:30"; (tng) (tng) (tng)
2var (tng) (tng) (tng)d (tng) (tng) (tng)= (tng) (tng) (tng)new (tng) (tng) (tng)Date(Date.parse(s.replace(/-/g, (tng) (tng) (tng)"/"))); (tng) (tng) (tng)
3
var (tng) (tng) (tng)s (tng) (tng) (tng)= (tng) (tng) (tng)"2005-12-15 (tng) (tng) (tng)09:41:30"; (tng) (tng) (tng)2
var (tng) (tng) (tng)d (tng) (tng) (tng)= (tng) (tng) (tng)new (tng) (tng) (tng)Date(Date.parse(s.replace(/-/g, (tng) (tng) (tng)"/"))); (tng) (tng) (tng)3
W二U方法真是简单啊Q?img src ="http://www.aygfsteel.com/swingboat/aggbug/101076.html" width = "1" height = "1" />
]]>
]]>
var self=this;
this.name=name;
this.age=age;
this.sex=sex;
toString=function(){
alert(self.name);
}
this.getName=function(){
return this.name;
}
}
使用:
var person=new Person("yhp",28,1);
person.getName();//可以讉KgetName函数
person.toString();//不可以访问toString函数
利用prototype.js也可以这么定?BR> var Person=Class.create();
必须定义Person的构造函?
Person.prototype.initialize=function(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
2.在上面的PersoncM,toString函数是不能直接访问this.name?
解决Ҏ(gu):可以定义变量self,把this赋值给?在toString中利用self来访问this.name.
var self=this;
toString(){
alert(self.name);
}
应用:定义一个类,有个成员变量number,在构造函C传入一个容?在容器中创徏一个div,div中绑定onclick,在onclick中访问number
var Module=function(container){
var self=this;
this.container=container;
this.build=function(){
this.number=Math.random();
var div=document.createElement("div");
div.innerHTML="module";
div.style.cursor="pointer";
div.onclick=function(){
alert(self.number);//在此处是不能讉Kthis.number?
}
this.container.appendChild(div);
test();
}
}
3.对于下面代码:
while(count>=0){
var div=document.createElement("div");
div.className="number";
div.innerHTML=count+1;
div.style.cursor="pointer";
div.onclick=function(e){
alert(count);
}
}
当触发div的onclick的时?每次alert昄都是-1;也就是最后count的?但需要每ơalert的都是innerHTML中?
获取innerHTML的方?
对于事g,获取触发该事件的对象:
IE : window.Event.srcElement
Firefox:e.target //e是函C入的事g参数
获取触发事g的对象的InnerHTML:
getClickPageNumber=function(e){
return Try.these(
function() {return window.event.srcElement.innerHTML},
function() {return e.target.innerHTML}
) ;
}
修改onclick:
div.onclick=function(e){
alert(getClickPageNumber(e));
}
4.清除html的table中tbody中的内容.
<tbody id="tBody">
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
代码:
$("tBody").innerHTML="";
上面的代码在IE中是没有效果?
修改:
while (tBody.rows.length > 0) {
tBody.deleteRow(0);
}
]]>
下面的例子检查鼠标是否在链接上单击，q且Q如果shift键被按下Q就取消链接的蟩转?BR>code<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick="cancelLink()">
下面的例子在状态栏上显C鼠标的当前位置?BR>code<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
属性：(x)
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX,
screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
1.altKey
描述Q?BR>(g)查alt键的状态?/P>
语法Q?BR>event.altKey
可能的|(x)
当alt键按下时Qgؓ(f) TRUE Q否则ؓ(f) FALSE 。只诅R?/P>
2.button
描述Q?BR>(g)查按下的鼠标键?/P>
语法Q?BR>event.button
可能的|(x)
0 没按?BR>1 按左?BR>2 按右?BR>3 按左右键
4 按中间键
5 按左键和中间?BR>6 按右键和中间?BR>7 按所有的?/P>
q个属性仅用于onmousedown, onmouseup, ?onmousemove 事g。对其他事gQ不鼠标状态如何，都返?0Q比如onclickQ?/P>
3.cancelBubble
描述Q?BR>(g)是否接受上层元素的事g的控制?/P>
语法Q?BR>event.cancelBubble[ = cancelBubble]
可能的|(x)
q是一个可d的布?yu)(dng)?
TRUE 不被上层原素的事件控制?BR>FALSE 允许被上层元素的事g控制。这是默认倹{?/P>
例子Q?BR>下面的代码片断演CZ(jin)当在囄上点击（onclickQ时Q如果同时shift键也被按下，取消上层元素（bodyQ上的事件onclick所引发的showSrc()函数?/P>
code<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() {
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" SRC="sample.gif">
4.clientX
描述Q?BR>q回鼠标在窗口客户区域中的X坐标?/P>
语法Q?BR>event.clientX
注释Q?BR>q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?/P>
5.clientY
描述Q?BR>q回鼠标在窗口客户区域中的Y坐标?/P>
语法Q?BR>event.clientY
注释Q?BR>q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?/P>
6.ctrlKey
描述Q?BR>(g)查ctrl键的状态?/P>
语法Q?BR>event.ctrlKey
可能的|(x)
当ctrl键按下时Qgؓ(f) TRUE Q否则ؓ(f) FALSE 。只诅R?/P>
7.fromElement
描述Q?BR>(g)?onmouseover ?onmouseout 事g发生Ӟ鼠标所d的元素?参考：(x)18.toElement
语法Q?BR>event.fromElement
注释Q?BR>q是个只d性?/P>
8.keyCode
描述Q?BR>(g)键盘(sh)件相对应的内码?BR>q个属性用?onkeydown, onkeyup, ?onkeypress 事g?/P>
语法Q?BR>event.keyCode[ = keyCode]
可能的|(x)
q是个可d的|可以是Q何一个Unicode键盘内码。如果没有引发键盘(sh)Ӟ则该gؓ(f) 0 ?/P>
9.offsetX
描述Q?BR>(g)查相对于触发事g的对象，鼠标位置的水q_?/P>
语法Q?BR>event.offsetX
10.offsetY
描述Q?BR>(g)查相对于触发事g的对象，鼠标位置的垂直坐?/P>
语法Q?BR>event.offsetY
11.propertyName
描述Q?BR>讄或返回元素的变化?jin)的属性的名称?/P>
语法Q?BR>event.propertyName [ = sProperty ]
可能的|(x)
sProperty 是一个字W串Q指定或q回触发事g的元素在事g中变化了(jin)的属性的名称?BR>q个属性是可读写的。无默认倹{?/P>
注释Q?BR>你可以通过使用 onpropertychange 事gQ得?propertyName 的倹{?/P>
例子Q?BR>下面的例子通过使用 onpropertychange 事gQ弹Z个对话框Q显C?propertyName 的倹{?/P>
code<HEAD>
<SCRIPT>
function changeProp(){
btnProp.value = "This is the new VALUE";
}
function changeCSSProp(){
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>
<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</BODY>
12.returnValue
描述Q?BR>讄或检查从事g中返回的?/P>
语法Q?BR>event.returnValue[ = Boolean]
可能的|(x)
true 事g中的Dq回
false 源对象上事g的默认操作被取消
例子见本文的开头?/P>
13.screenX
描述Q?BR>(g)鼠标相对于用户屏幕的水q位|?/P>
语法Q?BR>event.screenX
注释Q?BR>q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?/P>
14.screenY
描述Q?BR>(g)鼠标相对于用户屏幕的垂直位|?/P>
语法Q?BR>event.screenY
注释Q?BR>q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?/P>
15.shiftKey
描述Q?BR>(g)查shift键的状态?/P>
语法Q?BR>event.shiftKey
可能的|(x)
当shift键按下时Qgؓ(f) TRUE Q否则ؓ(f) FALSE 。只诅R?/P>
16.srcElement
描述Q?BR>q回触发事g的元素。只诅R例子见本文开头?/P>
语法Q?BR>event.srcElement
17.srcFilter
描述Q?BR>q回触发 onfilterchange 事g的o(h)镜。只诅R?/P>
语法Q?BR>event.srcFilter
18.toElement
描述Q?BR>(g)?onmouseover ?onmouseout 事g发生Ӟ鼠标所q入的元素?参考：(x)7.fromElement
语法Q?BR>event.toElement
注释Q?BR>q是个只d性?/P>
例子Q下面的代码演示?jin)当鼠标Ud按钮上时Q弹Z个对话框Q显C“mouse arrived?/P>
code<SCRIPT>
function testMouse(oObject) {
if(oObject.contains(event.toElement)) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>
19.type
描述Q?BR>q回事g名?/P>
语法Q?BR>event.type
注释Q?BR>q回没有“on”作为前~的事件名Q比如，onclick事gq回的type是click
只读?/P>
20. x
描述Q?BR>q回鼠标相对于css属性中有position属性的上元素的x轴坐标。如果没有css属性中有position属性的上元素Q默认以BODY元素作ؓ(f)参考对象?/P>
语法Q?BR>event.x
注释Q?BR>如果事g触发后，鼠标UdH口外，则返回的gؓ(f) -1
q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?/P>
21. y
描述Q?BR>q回鼠标相对于css属性中有position属性的上元素的y轴坐标。如果没有css属性中有position属性的上元素Q默认以BODY元素作ؓ(f)参考对象?/P>
语法Q?BR>event.y
注释Q?BR>如果事g触发后，鼠标UdH口外，则返回的gؓ(f) -1
q是个只d性。这意味着Q你只能通过它来得到鼠标的当前位|，却不能用它来更改鼠标的位|?
]]>
<body>
<div style="height:400;overflow:auto ">
<table width="543" height="300" border="1">
<tr>
<td width="59"><div align="center"></div></td>
<td width="59"><div align="center"></div></td>
<td width="403"><div align="center"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
说明Qdiv的高度ؓ(f)400Q而table的高度ؓ(f)300Q此U情况不?x)出现滚动条。div的高度ؓ(f)300Q而table的高度ؓ(f)400Q此U情况下Q在table的旁边就?x)出现滚动条。主要是利用?jin)div的overflow属性?img src ="http://www.aygfsteel.com/swingboat/aggbug/25652.html" width = "1" height = "1" />
]]>