JavaScript学习笔记(5)--面向半新不新的新手

最新推荐文章于 2024-05-29 11:24:41 发布

灵海翔龙

最新推荐文章于 2024-05-29 11:24:41 发布

阅读量1.6k

点赞数

文章标签： javascript 浏览器 function html menu 框架

本文链接：https://blog.csdn.net/miniDragon/article/details/1752323

版权

八、JavaScript其他常用窗口对象

l 屏幕(screen)对象

l 浏览器信息(navigator)对象

l 窗口(window)对象

l 网址(location)对象

l 历史(history)对象

l 框架(frame)对象

8.1 屏幕(screen)对象

屏幕对象是JavaScript运行时自动产生的对象，它实际上是独立于窗口对象的。屏幕对象主要包含了计算机屏幕的尺寸及颜色信息，这些信息是只读的。

屏幕对象常用属性

属性	意义
height	显示屏幕的高度
width	显示屏幕的宽度
availHeihgt	可用高度
availWidth	可用宽度
colorDepth	每像素中用于颜色的位数，其值为1,4,8,15,16,24,32

availHeihgt(可用高度)指的是屏幕高度减去系统环境所需要的高度。在Windows操作系统中，“可用高度”一般指的就是屏幕高度减去Windows任务栏的高度。

通过使用屏幕的可用高度和可用宽度，可以设置屏幕窗口对象的尺寸。

8.2 浏览器信息(navigator)对象

浏览器信息对象主要包含了浏览器用户使用计算机操作系统的有关信息，这些信息是只读的。

浏览器信息对象常用属性

属性	意义
appVersion	浏览器版本号
appCodeName	浏览器内码名称
appName	浏览器名称
platform	用户操作系统
userAgent	该字符串包含了浏览器的内码名称及版本号，它被包含在向服务器端请求的头字符串中，用于识别用户
language(除IE外) userLanguage(IE) systemLanguage(IE) browserLanguage(IE)	浏览器设置的语言操作系统设置的语言操作系统缺省设置的语言浏览器设置的语言

8.3 窗口(window)对象

窗口对象是浏览器网页的文档对象模型结构中的最高级对象，只要网页的HTML标记中包含有<body>或<frameset>标记，该网页就会包含一个窗口对象。

由于不同的浏览器定义的窗口属性和方法差别较大，这里仅列出各种浏览器最常用的窗口对象的属性和方法。

窗口对象的属性和方法大致可分为以下3类：

（1）子对象类。例如，文档对象、历史对象、网址对象、屏幕对象、浏览器信息对象等。

（2）窗口内容、位置及尺寸类。例如，新建窗口、多个窗口的控制、在窗口的状态栏中显示信息、滚动窗口的内容等。

（3）输入/输出信息与动画。其中动画控制的方法为setInterval()、setTimeout()、clearInterval()、clearTimeout()等

窗口对象常用属性

属性	意义
document	文档对象
frames	框架对象
screen	屏幕对象
navigator	浏览器信息对象
length	框架数组的长度
history	历史对象
location	网址对象
name	窗口名字
opener	打开当前窗口的窗口对象
parent	当前窗口的上一级窗口对象
self	当前窗口或框架
status	状态栏中的信息
defaultStatus	状态栏的缺省信息

窗口对象常用方法

方法	意义
alert(信息字符串)	打开一个包含信息字符串的提示框
confirm(信息字符串)	打开一个包含信息、确定和取消钮的对话框
prompt(信息字符串,缺省的用户输入信息)	打开一个用户可以输入信息的对话框
focus()	聚焦到窗口
blur()	离开窗口
open(网页地址，窗口名[，特性值])	打开窗口
close()	关闭窗口
setInterval(函数，毫秒)	每隔指定毫秒时间执行调用一下函数
setTimeout(函数，毫秒)	指定毫秒时间后调用函数
clearInterval(id)	取消setInterval设置
clearTimeout(id)	取消setTimeout设置
scrollBy(水平像素值，垂直像素值)	窗口相对滚动设置的尺寸
scrollTo(水平像素点，垂直像素点)	窗口滚动到设置的位置
resizeBy(水平像素值，垂直像素值)	按设置的值相对地改变窗口尺寸
resizeTo(水平像素值，垂直像素值)	改变窗口尺寸至设置的值
moveBy(水平像素值，垂直像素值)	按设置的值相对地移动窗口
moveTo(水平像素点，垂直像素点)	将窗口移动到设置的位置

8.3.1 多窗口控制

（1）新建窗口

通过窗口对象方法window.open()可以在当前网页中弹出新窗口，该方法的语法规则如下。

窗口对象 = window.open([网页地址，窗口名，窗口特性])；

窗口名可以是有效的字符串或HTML保留的窗口名，例如，”_self”、”_top”、”_parent”及”_blank”等。窗口特性的格式为”特性名1=特性值1；特性名2=特性值2；……”的字符串。

窗口特性及其值

特性名	意义	特性值
height	窗口高度	单位为像素
width	窗口宽度	单位为像素
top	窗口左上角至屏幕左上角的高度距离	单位为像素
left	窗口左上角至屏幕左上角的宽度距离	单位为像素
location	是否有网址栏	有 1，没有 0，缺省为1
menubar	是否有菜单栏	有 1，没有 0，缺省为1
scollbar	是否有滚动条	有 1，没有 0，缺省为1
toolbar	是否有工具条	有 1，没有 0，缺省为1
status	是否有状态栏	有 1，没有 0，缺省为1
resizable	是否可改变窗口尺寸	可以1，不可以0，缺省为1

（2）窗口的尺寸及位置

如果要设置新窗口的尺寸，即新窗口的宽度和高度，可以通过window.open与语句中的特性width（宽度）、height（高度）设置；如果要设置已有的窗口的尺寸，可以通过窗口对象的resizeTo()和resizeBy()方法重新设置窗口的尺寸。

（3）滚动网页

使用窗口对象的方法scollTo()和scollBy()可以“移动”网页的内容到指定的坐标位置，如果与动画方法setTimeout()一起使用，可以得到真正的“滚动”网页的效果。

（4）状态栏内容

使用窗口对象的status（状态）属性可以在浏览器窗口的状态栏中显示各种字符串，其语法规则为：window.status

该属性最常用的应用是隐藏网页的链接地址。通过onmouseover 和onmouseout来改变窗口对象状态信息的内容。

（5）窗口之间的控制及关闭窗口

当打开多个窗口时，可以通过窗口对象的“相对”属性，如opener(打开者)、parent(上一级)，或窗口名称进行窗口之间的控制。

使用窗口对象的close()方法可以进行关闭窗口的操作。值得注意的是，对于使用窗口对象open()的方法打开的窗口，可以无条件地通过close()方法进行关闭；对于不是使用窗口对象open()的方法打开的窗口，有些浏览器不允许使用close()方法进行关闭，有的则会出现确认窗口才会关闭。

8.4 网址(location)对象

网址对象是窗口对象中的子对象，它包含了窗口对象的网页地址内容，即URL。网址对象既可以作为窗口对象中的一个属性直接赋值或提取值，也可以通过网址对象的属性分别赋值或提取值。使用网址对象的语法规则如下：

当前窗口：window.location 或 location

window.location.属性或 location.属性

window.location.方法或 location.方法

指定窗口：窗口对象.location

窗口对象.location.属性

窗口对象.location.方法

例 URL http://67.85.238.132:18/cbx/essay.jsp?username=admin&group=grp1#blue

属性	意义	示例
href	整个url字符串	http:// 67.85.238.132:18/ cbx/essay.jsp?username=admin&group=grp1#blue
hash	url中由#开始的锚点名称	#blue
hostname	url中的服务器名、域名、IP地址	67.85.238.132
port	url中端口名	18
host	url中的hostname和port	67.85.238.132
pathname	url中的文件名或路径名	/cbx/essay.jsp
protocol	url中从开始至冒号（包括冒号）表示通信协议的字符串	http：
search	href中从”?”开始至结束的表示变量的字符串	?username=admin&group=grp1#blue

8.5 历史记录(history)对象

历史记录对象是窗口对象下的一个子对象，它实际上是一个对象数组，包含了一系列的用户访问过的URL地址，用于浏览器工具栏中的“Back to…(后退)”和“Forward to…(前进)”按钮。使用历史对象的语法规则如下：

当前窗口：

window.history.属性或 history.属性

window.history.方法或 history.方法

指定窗口：

指定窗口.history.属性

指定窗口.history.方法

8.5.1 历史对象的常用属性和方法

历史对象最常用的属性是length(历史对象长度)，它就是浏览器历史列表中访问过的地址个数。历史对象中的back()和forward()分别对应的是浏览器工具栏中的前进、后退按钮，通过方法go()可以改变当前网页至曾经访问过的任何一个网页。history.back()与history.go(-1)等效，history.forward()history.go(1)等效。

值得注意的是，如果go()中的参数n超过了历史列表中的网址个数，或者go()中的参数“网址”不在浏览器的历史列表中，这时，不会出现任何错误，只是当前网页没有发生变化。

历史对象常用方法

方法	意义
back()	显示浏览器的历史列表中后退一个网址的网页
forward()	显示浏览器的历史列表中前进一个网址的网页
go(n)或go(网址)	显示浏览器的历史列表中第n个网址的网页，n>0表示前进，反之，n<0表示后退或显示浏览器的历史列表中对应的“网址”网页

8.6 框架（frame）对象

框架对象是由HTML中的<frame>标记产生的，它实际就是窗口下独立的一个窗口，因此它具有与窗口对象几乎相同的属性和方法，与真正的窗口对象不同的是，它总是与上一级的窗口对象在同一个浏览器的窗口中。例如，要引用框架对象中的窗体元素时的语法规则如下。

窗口对象.框架对象.文档对象.窗体对象.窗体对象元素

在多框架对象中，要从一个框架对象中引用另一个框架中的窗体元素时，就可以使用窗口对象中的关系属性parent：

parent.另一框架对象.文档对象.窗体对象.窗体对象元素

同样，可以使用上述方法从一个框架对象中引用另一个框架中的JavaScript函数或全局变量，即：

parent.另一框架对象.JavaScript函数名

parent.另一框架对象.JavaScript全局变量名

对于不同的浏览器，还会有不同的框架对象，例如，对于IE浏览器，还提供了HTML标记为<iframe>的嵌入式框架对象，它与<frame>框架的对象的区别在于，<frame>框架对象只能是上下分布或水平分布，而<iframe>则可以嵌入在网页的任何位置。

例8-1 框架对象应用实例

// 以下代码文件名为 javascript-Frame练习.html

<html>

<head>

<title>JavaScript-Framew练习</title>

</head>

</frameset>

</html>

//以下代码文件名为 frame1.html

<html>

<head>

function openInFrame() {

parent.frame2.location.href = window.document.forms[0].txtUrl.value;

}

function clearFrame() {

parent.frame2.location.href = "about:blank";

}

function writeFrame() {

parent.frame2.document.open();

parent.frame2.document.write("这是从上部框架写下来的...");

parent.frame2.document.close();

}

function drawImage(imgName) {

var s = document.images[imgName].src;

//alert(imgName);

parent.frame2.document.open();

parent.frame2.document.write('<img src = "' + s + '">');

parent.frame2.document.close();

}

function resizeFrame(flag) {

if(flag == 1){

parent.document.body.rows = "100%,*";

} else {

parent.document.body.rows = "15%,*";

}

</script>

</head>

<body>

<form>

URL地址：<input type = "text" name = "txtUrl" value = "http://">

</form>

</body>

</html>

//以下代码文件名为 frame2.html

<html>

<body>

</body>

</html>

例8-2 有一个要求用户输入大量信息的窗体，其中下拉菜单中的选项将对应两个不同的选项列表，因此每当用户选择了下拉列表项后都要到服务器端得到其对应的选项列表内容。为了避免频繁的刷新屏幕，使用隐含框架将信息送至服务器端，然后通过JavaScript程序显示列表的内容。

目的：使用隐含框架

//以下代码文件名为 javascript-Frame练习-2.html

<html>

<head>

<title>JavaScript-Framewϰ-2</title>

</head>

</frameset>

</html>

//以下代码文件名为 frame2_1.html

<html>

<head>

function resizeFrame(flag) {

if(flag == 1) {

parent.document.body.rows = "100%,*";

}

else {

parent.document.body.rows = "15%,*";

}

function changeList() {

parent.frame2_2.document.location.href =

"frame2_2.html?type = " + document.forms[0].filter.value;

}

</script>

</head>

<form>

请输入公司信息：<br>

<hr>

名称：<input type = "text"><br>

地址：<input type = "text"><br>

编号：<input type = "text"><br>

<hr>

<option value = "0">请选择公司规模</option>

</select><br>

</form>

</body>

</html>

//以下代码文件名为 frame2_2.html

<html>

<head>

var aLine = "";

if (location.search.indexOf('small') > -1) {

aLine += '<select name = "detail" id = "detail" size = "10" style = "width:150px;">';

aLine += '<option value = "0">0-50</option>';

aLine += '<option value = "1">50-100</option>';

aLine += '</select>';

} else if (location.search.indexOf('large') > -1) {

aLine += '<select name = "detail" id = "detail" size = "10" style = "width:150px;">';

aLine += '<option value = "0">100-200</option>';

aLine += '<option value = "1">200-300</option>';

aLine += '</select>';

}

parent.frame2_1.document.getElementById('displayDetail').innerHTML = aLine;

</script>

</head>

<body>

</body>

</html>

九、JavaScript与动态网页

动态网页（DHTML）是静态网页（HTML4.0）、网页样式表（CSS）以及JavaScript语言基于文档对象模型（DOM）的组合效果。

对于JavaScript程序来说，动态网页的步骤如下：

（1）在网页元素中设置事件处理器，当用户对网页元素进行处理时，可以自动调用事件处理器。

（2）在JavaScript函数中，要先得到要改变的网页元素对象。

（3）然后，通过网页元素的属性和方法改变网页元素对象的内容（例如，网页中的文字、文本框、按钮等）或表现方式（例如，字体、颜色、背景色、位置及尺寸等）。

网页对象模型描述的是网页中各元素的组成结构及相互间的关系

9.1　网页对象模型与网页元素对象

网页对象模型描述的是网页中各元素的组成结构及相互间的关系，它为JavaScript提供了得到网页元素对象的方法。有以下三种

（1）HTML对象模型----------基于网页结构的方法

（2）DHTML对象模型--------网页元素id的方法

（3）W3C文档对象模型------结点关系的方法

9.1.1 HTML对象模型方法

通过HTML对象模型的结构层次得到每一个对象。使用这种方法，要清楚的知道当前所处理的网页元素对象在网页结构层次中的位置。

9.1.2 DHTML对象模型方法

这种方法简洁明了，使用时可以不用具体了解文档对象模型的层次结构，而直接得到网页中的所需元素对象。

（1）网页中的每一对标记就是一个元素对象，例如，<p></p>、<div></div>、

<table></table> 、<select></select>、<input>等

（2）为了得到网页中的对象，在标记中赋值一个唯一的id。

　　　例如，<p id=”block1”></p>、<div id=”titleBar”></div>等。

（3）通过document.getElementById的方法得到所需的对象。

9.1.3 W3C文档对象模型方法

W3C文档对象模型将网页结构作为树状结点处理，每一个结点代表网页中的一个元素，对应于HTML文件中的一对标记，当我们通过id得到某一个结点的元素对象后，就可以通过结点关系方便地得到其相关的其他元素对象。

9.2 动态网页内容

动态网页内容包括改变网页内容、添加或删除网页元素等，一般可以通过DHTML对象模型的方法和W3C文档对象模型的方法来实现。

9.2.1 DHTML对象模型方法

1、一般网页内容

对于一般的浏览器，DHTML对象模型方法就是通过innerHTML来改变、添加或删除指定标记中的内容，其中，改变后的新内容中也可以包括HTML标记。

对于Microsoft 的Internet Explorer浏览器，除了上述方法外，还提供了另外３种改变网页内容的方法：innerText、outerText、outerHTML

innerText的使用方法与innerHTML相似，不同的是，改变后的内容仅作为文字效果显示，即使包括了HTML标记，也不会出现HTML的效果。

outerHTML的方法与innerHTML相似，不同的是，改变的内容不是指定标记间的内容，而是包括了指定标记本身。

outerText的使用方法与outerHTML相似，不同的是，改变后的内容仅作为文字效果显示，即使包括了HTML的标记，也不会出现HTML的效果。

2、表格内容

DHTML对象模型方法处理网页中的表格内容不同于其他的网页内容，其基本步骤如下

（1）通过<table></table>标记中的id得到表格对象，或通过innerHTML插入表格对象。

（2）通过表格对象的insertRow方法在表格中插入行。

（3）通过行对象的insertCell方法在行中插入表格元素。

（4）最后通过表格元素对象的innerHTML方法添加表格元素中的内容。

（5）通过行对象的deleteCell方法可以删除行中的表格元素。

（6）通过表格对象的deleteRow方法可以删除表各种的行。

例9-1　用DHTML对象模型方法新增、删除表格行内容

//注意：以下代码调试没有通过！！！

<html>

<head>

function addRow() {

var tableObj = document.getElementById("mainTb");

var newRowObj = tableObj.insertRow(tableObj.rows.length);

var newNameCell = newRowObj.insertCell(newRowObj.cells.length);

var newCompanyCell = newRowObj.insertCell(newRowObj.cells.length);

var newButtonCell = newRowObj.insertCell(newRowObj.cells.length);

newNameCell.innerHTML = document.getElementById("newName").value;

newCompanyCell.innerHTML = document.getElementById("newCompany").value;

newButtonCell.innerHTML = '<input type="button" value="删除"

οnclick="deleteRow('+(tableObj.rows.length-1)+')">';

}

fucntion deleteRow(index) {

var tableObj = document.getElementById("mainTb");

tableObj.deleteRow(index);

}

</script>

</head>

<div><span id="new">姓名<input type="text" name="newName" id="newName">单位

<input type="text" id="newCompany"><input type="button" value="新增"

οnclick="addRow()"></span>

</div>

<tr>

</tr>

<td>某某某公司</td>

</tr>

<td>某某某XXX公司</td>

</tr>

</table>

</body>

</html>

9.3 动态网页样式

9.3.1 Hhhhhhhl 网页样式表简介

HTML网页包含两个方面：网页的内容和网页的表现方式。网页样式表(CSS)是用于有效的设计和实现网页表现方式的一组描述或定义。

网页样式表具有以下特征：

（1）通过样式表来表示网页的颜色、字体、背景色、边框线及网页内容的位置、大小尺寸等属性。

（2）一系列的样式组成了样式表。

（3）定义样式表有３种方式：外部样式表文件、内部样式表文件及标记中的样式标。

（4）在网页的标记中应用样式时采用的是层叠式原则。

例9-2 样式表应用，（本例中包含一个单独的，名为main.css的样式表文件）

<html>

<head>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<div id="footer">XXXX公司</div>

</div>

</body>

</html>

// mani.css

1 body,table {

2 font:12px Tahoma;

3 margin:20px;

4 }

5 H2 {

6 font:bolder 23px Tahoma;

7 color:darkred;

8 }

9 .table{

10 border:1px outset lightgrey;

11 padding:20px;

12 background:lightyellow;

13 width:300px;

14 }

15 .button{

16 padding:2px 10px 2px 10px;

17 border:1 outlset white;

18 background:darkblue;

19 color:white;

20 font:bolder 11px Tahoma

21 }

22 /*每一页的脚注格式*/

23 #footer{

24 font:16px Tahoma;

25 margin:30px 10px 10px 10px;

26 text-align:right;

27 }

9.3.2 Hhhhhhhl样式的语法规则

定义样式表的语法规则如下：

对象１，对象２……｛属性名１：属性值１；属性名２：属性值２；……｝

1、样式语法规则中的对象

样式语法规则中的对象可以是下述任意一种情况的设置。当多个对象具有相同的样式定义时，多个对象之间可用逗号相间,如上例中的第１行。

（1）“对象”是HTML中的标记名。例如上立中5～8行给出了关于HTML标记<h2>的样式定义，这时html文件中的<h2>标记表示的内容就会按上述定义的样式进行显示。

（2）“对象”是自定义的样式名。这是样式名前要加一个点“.”，在HTML标记中使用时就需要用“class=样式名”的方式。

除了上述自定义样式名外，还可以指定某一种标记下的自定义样式名。例如，下述例子中，虽然有两个名为“sample”的样式名，但是它们分别属于不同的标记之下，因此网页效果也不同。

样式定义：

　　div.sample{color:red;}

table.sample{color:black;}

HTML中的应用：

<body>

<div class=”sample”>这仅是一个例子</div>

<table class=”sample”><tr><td>这是表中的一个例子</td></tr></table>

</body>

（3）“对象”是标记中的id名。这时在样式定义中，id名前需要添加一个字符“#”，而在HTML标记中不需要做任何修改。main.css中的23~27行对id名为footer的网页对象定义了样式，在html文件中，具有该id名的标记中的网页内容将会按其定义的样式进行显示。

同样，在样式定义时，id名前也可以加入标记名，表示指定标记中的、具有id名的标记间的网页内容，例如：div #right{text-align:right;}

2、样式语法规则中的属性名及属性值

样式定义中的属性名与属性值就是所要设置样式的属性名称与值，它们之间以冒号“：”相间。

用于HTML 网页的所有样式定义中的属性名及属性值，参见：

http://www.w3.org/TR/css1

或其他有关样式定义的参考网页：http://www.w3schools.com/css/default.asp

如果要设计的对象定义多个样式，它们之间要用分号“：”相间，它们可以写在同一行，也可以分行。

3、样式语法规则中的注释行

样式列表中的注释应写在/**/之间。

9.3.3 层叠式应用规则

定义样式表有如下三种方式：

（1）外部样式表文件。

（2）内部样式表，定义在<head>标记中。

（3）标记中的样式，使用style=”……”

一个网页中可以同时包含有上述３种方式定义的样式表，当出现重复定义的样式对象时，按层叠式规则应用，即：在同一个方式中的重定义的样式对象，后定义的有效；在不同方式中的重复定义的样式对象，按上述序列中（3）优先级最高，（１）最低。

9.3.4 改变网页元素对象的样式属性

改变网页元素对象的样式属性指的是通过JavaScript程序来设置或改变指定的HTML标记对象的网页样式属性，从而可以改变网页的表现方式。其语法规则如下

网页元素对象.style.属性名=属性值

9.3.5 改变网页样式表

通过JavaScript不仅可以改变网页标记对象中的样式属性，而且可以动态的改变在外部样式文件或内部网页样式中定义的样式表，即可以在样式表中添加、修改和删除网页样式定义。

像其他网页中的元素一样，网页样式表也是文档对象中的一个子对象，其对应的HTML标记就是外部网页样式文件定义标记及内部网页样式表定义标记。

例9-3 在HTML<head>标记中的样式表定义

<head>

H1{font-size:26px;font-weight:bolder;color:green}

H2{font-size:18px;font-weight:bolder;background-color:lightBlue}

</style>

</head>

1、得到样式表对象

在文档对象模型中，通过styleSheets数组可以得到样式表对象，如上例9-3

document.styleSheets[0]; //外部样式表

document.styleSheets[1]; //内部样式表

2、添加一个样式定义

不同的浏览器对于添加样式定义具有不同的语法规则。

对于IE：样式表对象.addRule(属性名，属性值，第几个)；

对于Netscape：样式表对象.insertRule(样式定义，第几个)；

向例9-3中添加一个新样式

对于IE：var styleObj = document.styleSheets[1];

styleObj.addRule(“body”, “background-color:lightGrey”);

对于Netscape：var styleObj = document.styleSheets[1];

styleObj.insertRule(“body {background-color:lightGrey}”,0);

3、删除一个样式定义

对于IE：样式表对象.removeRule(第几个)；

对于 Netscape：样式表对象.deleteRule(第几个)；

以例9-3为例，删除其中的一个样式定义（H1）

对于IE： styleObj.removeRule(0);

对于Netscape：styleObj.deleteRule(0);

4、修改已定义的样式

每一个样式表对象中都包含了一组样式定义对象数组，例9-3中的内部样式表中的H1可以表示为如下形式。

对于IE：　document.styleSheets[1].rules[0];

对于Netscape：document.styleSheet[1].cssRules[0];

下述JavaScript程序将修改例9-3中的内部样式表的H1样式定义

对于IE：　styleObj.rules[1].style.fontSize=”12px”;

对于Netscape： styleobj.cssRules[1].style.fontSize=”12px”;

9.3.6 改变外部网页样式文件

通过样式表对象中的href属性可以方便的得到和改变外部网页样式文件名。

得到外部网页样式文件名

alert(document.getElementById(“outerCss”).href);

重新设置外部网页样式文件名

document.getElementById(“outerCss”).href=”blueStyle.css”;

9.4　动态定位网页对象

网页样式表有关定位的属性参考http://www.w3schools.com/css/css_positioning.asp 。

9.4.1 绝对位置与相对位置

在网页样式表定义中，属性position有两个数性值，分别为absolute（绝对位置）和relative（相对位置），它们表示定位元素对象的基准点依据。“绝对位置”表示当前元素对象的基准点为上一级元素对象所设置的left和top位置，如果上一级元素对象没有设置left和top属性，那么就以<body>标记对象的原点为基准。“相对位置”表示当前元素对象的位置将按网页内容顺序排版，相对移动left和top尺寸。设置“绝对位置”可以不按网页元素顺序精确的定位在屏幕上；设置“相对位置”可以使网页元素随浏览器窗口尺寸变化而相对地改变。缺省状态下，如果没有设置position属性，则表示定位元素对象的基准点依据为“相对位置”。

9.4.2 z-index

如果在定位元素的过程中，两个元素对象重叠了，设置样式中z-index属性就可以得到重叠了的两个元素对象的前后顺序。z-index的属性值可以设置为auto或数字，当设置为auto时，按HTML文件中的顺序，后者在上方，前者在下方；当设置为数字时，数字大的表示在上方，小的表示在下方。

例9-4 重叠排版练习 circle.gif

<html>

<head>

<style>

#circle{position:absolute;left:0;top:0px;z-index:1}

#text{position:absolute;left:10;top:10px;z-index:10}

</style>

</head>

<body>

<div id="text"> 这是一段测试文字</div>

</body>

</html>

9.4.3 坐标位置及尺寸

网页中元素对象的坐标位置和尺寸可以通过两种方法得到，一种是网页样式表的方法，另一种是文档对象模型的方法。

1、网页样式表的方法

网页样式表中定位网页元素对象是用left、top、right、bootom属性，设置宽度和高度是用width和height属性。使用格式如下：

网页元素对象.style.网页样式属性名

通过这种方法可以方便的设置网页元素对象的位置及尺寸，但要注意，只有当网页的样式表中定义了上述属性，JavaScript才可以得到这些属性值，否则就得不到。

2、文档对象模型的方法

文档对象模型的方法提供了各种类型的元素对象定位及尺寸属性。

（1）属性名中包含“client”的宽度和高度表示的是真正能够显示网页内容的区域；属性名中包含“offset”的宽度和高度表示的是包括了元素对象边线在内的所有区域；属性名中包含“scroll”的宽度和高度表示的是包含所有全部网页内容的区域。

（2）属性名中包含“offset”的定位表示相对于包含当前元素对象的上一级标记的原点，如果没有上一级标记，则相对于<body>的原点坐标；属性名中包含“scroll”的定位表示相对于网页内容区域端点的坐标。

9.4.4 display和visibility

网页样式表中除了通过z-index可以控制重叠元素对象之间的显示与隐藏关系外，还可以通过display属性和visibility属性来控制元素对象的显示与隐藏。

display属性和visibility属性的使用方法及效果比较相似：如果设置display属性值为block，或设置visibility属性为visible，都可以显示元素对象内容；

反之，如果设置display属性值为none，或设置visibility的属性值为hidden，都将隐藏元素对象内容。

它们两者的区别在于，当使用display属性进行隐藏元素对象的操作时，被隐藏的元素对象将不占位置，其他元素将紧接着顺序显示；当使用visibility属性进行隐藏元素对象的操作时，只是隐藏了当前元素对象的内容，但仍保留着其区域。

例9-5 对于需要长时间装载数据的网页，先显示“请稍候……”字符串，知道网页完全显示

//注意：以下代码未调试通过

<html>

<head>

fucntion display() {

alert("run in display");

document.getElementById("mainContent").style.display = "block";

document.getElementById("wait").style.display = "none";

}

function writeData() {

alert("run in writeData");

var s = "<table border=1><tr><td>Header1</td><td>Header2</td><td>Header3</td><td>Header4</td><td>Header5</td></tr>";

for(var i=0;i<1500;i++) {

s += '<tr><td>col' + i + '1</td><td>col' + i + '2</td><td>col' + i + '3</td><td>col' + i +'4</td><td>col' + i + '5</td></tr>';

s += '</table>';

document.write(s);

}

</script>

</head>

</div>

</body>

</html>

练习1 下拉菜单 //以下代码没有调试通过

<html>

<head>

<style>

a {

cursor:default;

text-decoration:none;

color:#333;

}

#menubar {

position:absolute;

left:0;

top:0;

width:100%;

height:26px;

font:11px tahoma;

color:#333;

background:#eee;

}

#menubar a {

padding:2px;

margin:10px;

}

#menubar td {

text-align:center;

background:#eee;

border:1px solid #eee;

cursor:default;

white-space:nowrap;

}

.menupane {

position:absolute;

border:1px solid #ccc;

border-right:2px solid #ccc;

border-bottom:2px solid #ccc;

background:#fff;

z-index:10;

font:11px Tahoma;

color:#333;

width:150px;

}

#menubar img,.menupane img {

margin-right:5px;

vertical-align:middel;

}

#menubar img.hasMenu {

margin-left:10px;

margin-right:0;

}

.menupane a {

display:block;

padding:2px;

padding-left:10px;

}

.menupane a:hover {

background-color:#999;

color:#fff;

}

</style>

var mIndex = -1;

var lastIndex = -1;

var isOpen = false;

document.onclick = doClick;

var menuCount = 3;

//打开下拉菜单

function openLever1() {

var o = getObj("menu" + mIndex);

if(getObj("submenu" + mIndex)) {

show("submenu" + mIndex); //显示下拉菜单并定位下拉菜单

getObj("submenu" + mIndex).style.left = o.offsetLeft;

getObj("submenu" + mIndex).style.top = o.offsetTop + getObj("menubar").offsetHeight-4;

}

isOpen = true;

lastIndex = mIndex;

setStyle("menu" + mIndex,getHlightStatus());

}

function mouseOverMenu(index) {

mIndex = index;

setStyle("menu" + index,getHlightStatus());

if(isOpen) {

if(lastIndex > -1) {

hideMenu(lastIndex);

}

setStyle("menu" + lastIndex,"none");

if(getObj("submenu" + index)) {

openLever1();

}

function mouseOutMenu(index) {

if(!isOpen||!getObj("submenu" + index)){

setStyle("menu" + index,"none");

}

mIndex = -1;

}

function doClick() {

if(mIndex == -1) { //not click on the menubar

for(var i=0;i<menuCount;i++){

hideMenu(i);

eval("setStyle('menu" + i+ "','none')");

}

isOpen = false;

lastIndex = -1;

}else{ //click on the menubar

if(isOpen && mIndex == lastIndex) {

hideMenu(lastIndex);

isOpen = false;

} else {

openLever1();

}

setStyle("menu" + mIndex,getHlightStatus());

}

function setStyle(id,style) {

if(style == "close_hlight") {

getObj(id).style.borderTop = "1px solid white";

getObj(id).style.borderLeft = "1px solid white";

getObj(id).style.borderRight = "1px solid #999";

getObj(id).style.borderBottom = "1px solid #999";

} else if(style == "open_hlight") {

getObj(id).style.borderTop = "1px solid #999";

getObj(id).style.borderLeft = "1px solid #999";

getObj(id).style.borderRight = "1px solid white";

getObj(id).style.borderBottom = "1px solid white";

} else if(style == "none") {

getObj(id).style.border = "1px solid #eee";

}

function getHlightStatus() {

if(isOpen) {

return "open_hlight";

}else {

return "close_hlight";

}

function getObj(id) {

return document.getElementById(id);

}

function show(id) {

if(getObj(id)) {

getObj(id).style.display = "block";

}

function hide(id) {

if(getObj(id)) {

getObj(id).style.display = "none";

}

function hideMenu(index) {

var id = "submenu" + index;

if(getObj(id)) {

hide(id);

}

</script>

</head>

<body>

<tr>

<td οnmοuseοver="mouseOverMenu(0) οnmοuseοut="mouseOutMenu(0)"

id="menu0" style="width:70px;"><a href="#"><img src="home.gif" border="0">Home</a>

</td>

<td οnmοuseοver="mouseOverMenu(1) οnmοuseοut="mouseOutMenu(1)"

id="menu1" style="width:90px;"><img src="review.gif" border="0">Review<img src="arrowDown.gif" class="hasMenu">

</td>

<td οnmοuseοver="mouseOverMenu(2) οnmοuseοut="mouseOutMenu(2)"

id="menu2" style="width:90px;"><img src="test.gif">Test<img src="arrowDown.gif" class="hasMenu">

</td>

</tr>

</table>

<a href="#">Level 1</a>

<a href="#">Level 2</a>

<hr>

</div>

<a href="#">Level 1</a>

<a href="#">Level 2</a>

<hr>

</div>

</body>

</html>

练习2 动画菜单 //以下代码调试没有通过

<html>

<head>

<style>

#menu {

position:absolute;

top:-2000px;

border:1px solid #000000;

border-collapse:collapse;

visibility:hidden;

}

td.txt {

border:1px solid #000000;

text-align:center;

font-weight:bold;

color:#ffffff;

}

td.txt a {

font-family:tahoma,arial,helvetica,sans-serif;

font-size:12px;

font-weight:bold;

color:#ffffff;

text-decoration:none;

}

td.txt a:hover {

font-family:tahoma,arial,helvetica,sans-serif;

font-size:12px;

font-weight:bold;

color:#000000;

text-decoration:none;

}

</style>

var ie5 = (document.getElementById&&document.all);

var ns6 = (document.getElementbyId&&!document.all);

var MenuTop = 50;

var MenuLeft = 150;

var timerID1 = null;

var timerID2 = null;

function statik() {

if(ie5) {

document.getElementById('menu').style.top = document.body.scrollTop + MenuTop;

}

if(ns6) {

document.getElementById('menu').style.top = window.pageYOffset + MenuTop;

}

function changeBG(obj,bgColor) {

if(ie5 || ns6) {

obj.style.backgroundColor = bgColor;

}

function slideIn() {

if(ie5 || ns6) {

if(paresInt(document.getElementById('menu').style.left)<0) {

clearTimeout(timerID2);

document.getElementById('menu').style.left

= parseInt(document.getElementById('menu').style.left)+5+"px";

timeID1 = setTimeout("slideIn()",30);

}

function slideOut() {

if(ie5 || ns6) {

if(paresInt(document.getElementById('menu').style.left)>MenuLeft) {

clearTimeout(timerID1);

document.getElementById('menu').style.left

= parseInt(document.getElementById('menu').style.left)-5+"px";

timeID2 = setTimeout("slideOut()",30);

}

function reDo() {

if(ie5 || ns6) {

window.location.reload();

}

function slideMenuInit() {

if(ie5 || ns6) {

document.getElementById('menu').style.visibility = "visible";

document.getElementById('menu').style.left = -MenuLeft;

document.getElementById('menu').style.top = MenuTop;

}

window.onresize = reDo;

setInterval('statik()',1);

</script>

</head>

<table id="menu" width="180" border="1" cellpadding="3" cellspacing="0" bgcolor="#0099CC" bordercolor="#000000"

οnmοuseοver="slideIn()" οnmοuseοut="slideOut()">

<tr>

</td>

</tr>

<tr>

<a href="#">JavaScript入门</a>

</td>

</tr>

<tr>

<a href="#">网页样式入门</a>

</td>

</tr>

<tr>

<a href="#">动态网页技术</a>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

for(i=1;i<101;i++) {

document.write("<br/>");

}

</script>

</body>

</html>

灵海翔龙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记(5)--面向半新不新的新手

八、JavaScript其他常用窗口对象l 屏幕(screen)对象l 浏览器信息(navigator)对象l 窗口(window)对象l 网址(location)对象l 历史(history)对象l 框架(frame)对象 8.1 屏幕(scre
复制链接

扫一扫