Dom编程练习程序1117Word文档格式.docx

Dom编程练习程序1117Word文档格式.docx

《Dom编程练习程序1117Word文档格式.docx》由会员分享，可在线阅读，更多相关《Dom编程练习程序1117Word文档格式.docx（25页珍藏版）》请在冰豆网上搜索。

160px;

background-color:

#FFCC00;

}

#textid{

#CCCCCC;

300px;

/style>

scripttype="

text/javascript"

src="

doctool.js"

/script>

functionchange（）

{

varselNode=byId（"

selid"

）;

varvalue=selNode.options[selNode.selectedIndex].value;

//alert（value）;

vardivNode1=byId（"

cssid"

vardivNode2=byId（"

textid"

divNode1.style.textTransform=value;

divNode2.innerText="

text-transform:

"

+value+"

;

}

/head>

body>

divid="

Goodgoodstudy,Daydayup!

/div>

p>

/p>

selectid="

onchange="

change（）"

<

optionvalue="

none"

--text-transform--<

/option>

capitalize"

首字母大写<

uppercase"

所有字母大写<

lowercase"

所有字母小写<

/select>

text-transform:

none;

/body>

/html>

************************************************************************

程序十二、

Css样式的分层显示效果

获取鼠标的坐标，让指定的区域随着鼠标移动。

获取鼠标坐标：

event.x,event.y；

指定区域随鼠标移动其实就是改变了指定区域的left、top的值。

这里需要用到的事件：

body对象的onmousemove事件。

还需要用到一个css样式。

直接定义页面，所有的区域都在同一层次。

为了对某一个区域进行定位。

将该区域分离出来，分离到另一个层次，

用到了css中的position属性。

htmlxmlns="

******************************************

#bodyid{

border:

#0000001pxsolid;

600px;

800px;

window.onload=function（）

document.body.onmousemove=function（）

{

varadNode=document.getElementById（"

ad"

adNode.style.left=event.x;

adNode.style.top=event.y;

style="

position:

absolute;

left:

0;

top:

0"

imgsrc="

1.jpg"

height="

80px"

width="

100px"

bodyid"

body区域

********************************************************************

程序十三、

实现级联菜单的选择，当选择某个省时，会自动列出所包含的区域：

如下图

********************************

functionselCity（）

vararr=[["

--选择城市--"

],["

海淀区"

"

朝阳区"

东城区"

西城区"

昌平区"

],

["

沈阳"

大连"

鞍山"

"

抚顺"

济南"

青岛"

烟台"

威海"

济宁"

洛阳"

郑州"

安阳"

南阳"

开封"

]]

varindex=byId（"

）.selectedIndex;

//alert（byId（"

）.options[index].innerText）;

varsubselNode=byId（"

subselid"

varcitys=arr[index];

/*方法一：

清空上一次选择身份后的现实内容，注意：

角标自增、长度自减的情况

for（varx=0;

x<

subselNode.options.length;

）

//alert（x+"

....."

+subselNode.options[x].innerText+"

..."

+subselNode.options.length）;

subselNode.removeChild（subselNode.options[x]）;

*/

//方法二：

直接将subselNode.options.length=0;

subselNode.options.length=0;

citys.length;

x++）

varoptNode=doc.createElement（"

option"

optNode.innerText=citys[x];

subselNode.appendChild（optNode）;

selCity（）"

option>

--选择省市--<

北京<

辽宁<

山东<

河南<

--选择城市--<

程序十四、

实现如下图所示：

用户通过单击“添加附件”按钮实现附件的添加，可添加多个，然后可通过后面的“删除附件”按钮将不需要的附件删除。

tabletda:

link,tabletda:

visited{

text-decoration:

color:

#000066;

table{

#0000661pxsolid;

varcount=1;

functionaddFile（）

vartabNode=byTag（"

table"

）[0];

vartrNode=tabNode.insertRow（）;

trNode.id="

tr_"

+count;

vartdNode_file=trNode.insertCell（）;

vartdNode_del=trNode.insertCell（）;

tdNode_="

inputtype='

file'

tdNode_del.innerHTML="

ahref='

javascript:

void（0）'

onclick='

delfile（"

+count+"

）'

删除"

附件<

/a>

count++;

functiondel）

vartrNode=byId（"

+num）;

/*删除动作,可以合并成一句

vartbdNode=tabNode.childNodes[0];

tbdNode.removeChild（trNode）;

trNode.parentNode.removeChild（trNode）;

functiondelfiel_1（node）

vartrNode=node.parentNode.parentNode;

table>

tr>

<

td>

ahref="

void（0）"

onclick="

addFile