<li>* 默认状态下，HTML网页中的内容都是按照网页元素的顺序出现的，在网页样式技术出现前，网页内容的排版大都采用“表格”方式进行。使用样式技术后，网页元素的内容可以在网页中精确布局。如果将JavaScript应用在网页样式表有关定位的属性方面，就可以根据用户的操作动态地在网页中布局网页元素。
<li>* 在网页样式表定义中，属性position有两个属性值，分别为absolute（绝对位置）和relative（相对位置），这两个值表示定位元素对象的基准点依据。“绝对位置”表示当前元素对象的基准点为上一级元素对象设置的left和top位置。如果上一级元素对象没有设置left和top属性，就以<body>标签对象的原点为基准。“相对位置”表示当前元素对象的位置将按照网页内容顺序排版，相对移动left和top位置。
<li>* 设置“绝对位置”可以不按网页元素顺序精确定位在屏幕上；设置“相对位置”可以使网页元素随浏览器窗口尺寸变化而相对改变。默认状态下，如果没有设置position属性，则表示元素对象的定位基准依据“相对位置”。
<li>* 如果在定位元素的过程中，两个元素对象重叠了，那么，设置样式中的z-index属性可以得到重叠了的两个元素对象的前后顺序。z-index属性值可以设置为auto或者数字。当设置为auto时，按HTML中的顺序，后者会出现在前者上方；当设置为数字时，数值较大的会出现在上方。
<li>* 网页中元素对象的坐标位置和尺寸，可以通过网页样式表的方法或者DOM方法得到。在网页样式表中，定位网页元素对象使用left、top、right、 bottom属性，设置宽度和高度使用width和height属性。这些网页样式属性在JavaScript中使用“网页元素对象.style.网页样式属性名”格式进行引用。通过这种方法可方便设置网页元素对象的位置及尺寸，但是只有在网页样式表中定义了上述属性时，JavaScript才可对其进行引用。
<li>* DOM提供了各种类型的元素对象定位及尺寸属性，这些属性基本上只用于读取，而不可进行设置，使用时的语法规则是“网页元素对象.DOM属性名”。其中，属性名中包含“client”的宽度和高度表示真正能够显示网页内容的区域；属性名中包含“offset”的宽度和高度表示包括了元素对象边线在内的所有区域；属性名中包含“scroll”的宽度和高度表示包含所有全部网页内容的区域。
<li>* 在网页样式表中，除了可以通过z-index控制重叠元素对象之间的显示与隐藏关系外，还可以通过display属性和visibility属性控制元素对象内容的显示与隐藏。display属性和visibility属性的用法和效果比较相似。如果设置display属性值为block，或设置 visibility属性值为visible，都可以显示元素对象内容；反之，设置display属性值为none，或者设置visibility属性值为hidden，都将隐藏元素对象内容。
<li>* 当使用display属性隐藏元素对象时，被隐藏的元素对象将不占位置，其他元素紧接着顺序显示。而使用visibility属性隐藏元素对象时，只是隐藏了当前元素对象的内容，但仍在原位置保留其所占区域。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>样式与定位综合示例</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript">
<!--
//检测对象
var layerobject = ((document.layers) ? (true) : (false));
var dom = ((document.getElementById) ? (true) : (false));
var allobject = ((document.all) ? (true) : (false));
//检测浏览器
opera=navigator.userAgent.toLowerCase().indexOf('opera')!=-1;
//为传递来的layerName值传递对象
function getElement(layerName,parentLayer) //函数：获取layerName的相关属性
{
if(layerobject)
{
parentLayer = (parentLayer)? parentLayer : self;
layerCollection = parentLayer.document.layers;
if (layerCollection[layerName])
return layerCollection[layerName];
//在嵌套层次中搜索
for(i=0; i << layerCollection.length;)
return(getElement(layerName, layerCollection[i++]));
}
if (allobject)
return document.all[layerName]; //设置all[]环境
if (dom)
return document.getElementById(layerName); //设置DOM环境
}
//隐藏 id = layerName 的层
function hide(layerName)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.visibility = 'hide';
else
theLayer.style.visibility = 'hidden'; //设置其他环境
}
//显示 id = layerName的层
function show(layerName)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.visibility = 'show';
else
theLayer.style.visibility = 'visible'; //设置其他环境
}
//设置名为layerName 的层的x坐标
function setX(layerName, x)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.left=x;
else if (opera) //设置在opera中的情况
theLayer.style.pixelLeft=x;
else
theLayer.style.left=x+"px"; //设置其他环境
}
//设置名为layerName 的层的y坐标
function setY(layerName, y)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.top=y;
else if (opera) //设置在opera中的情况
theLayer.style.pixelTop=y;
else
theLayer.style.top=y+"px"; //设置其他环境
}
//设置名为layerName 的层的z-Index
function setZ(layerName, zIndex)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.zIndex = zIndex;
else
theLayer.style.zIndex = zIndex; //设置其他环境
}
//设置名为layerName 的层的高度
function setHeight(layerName, height)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.clip.height = height;
else if (opera) //设置在opera中的情况
theLayer.style.pixelHeight = height;
else
theLayer.style.height = height+"px"; //设置其他环境
}
//设置名为layerName 的层的宽度
function setWidth(layerName, width)
{
var theLayer = getElement(layerName);
if (layerobject)
theLayer.clip.width = width;
else if (opera) //设置在opera中的情况
theLayer.style.pixelWidth = width;
else
theLayer.style.width = width+"px"; //设置其他环境
}
//设置由 top、right、bottom和left 定义的名为layerName 的层的矩形裁切
function setClip(layerName, top, right, bottom, left)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
{ //分别设置top、right、bottom和left的值
theLayer.clip.top = top;
theLayer.clip.right = right;
theLayer.clip.bottom = bottom;
theLayer.clip.left = left;
}
else
//设置其他环境
theLayer.style.clip="rect("+top+"px "+right+"px"+""+bottom+"px"+left+"px )";
}
//通过content参数设置layerName 的内容
function setContents(layerName, content)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
{
theLayer.document.write(content);
theLayer.document.close();
return;
}
if (theLayer.innerHTML) //设置其他环境
theLayer.innerHTML = content;
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<!--设置2个<div>，进行后面相应的操作-->
<div id="region1" style="position: absolute; top: 90px; left: 200px;
width: 220px; height: 100px;
background-color: #ffffcc; z-index: 10;">
这是一个测试层，顺序为10。
</div>
<div id="region2" style="position: absolute; top: 90px; left: 80px;
width: 220px; height: 120px;
background-color:#33ffcc; z-index: 5;">
这是一个参考层，顺序为5。
</div>
<h2>样式与定位综合示例</h2><hr><br><br><br><br><br><br><br><br>
<form name="testform" id="testform" action="#" method="get">
<table border="1" bordercolor="green" cellspacing="5" cellpadding="5">
<tr><td>可见度:</td><td>
<!--通过onclick分别调用show ()函数和hide()，进行可见度设置-->
<input type="button" value="显示" οnclick="show('region1');">
<input type="button" value="隐藏" οnclick="hide('region1');">
</td></tr><tr><td>位置：</td><td>
<!--通过onclick调用setX()函数，进行x设置-->
x: <input type="text" value="300" name="x" id="x" size="4">
<input type="button"value="设置"
οnclick="setX('region1',document.testform.x.value);">
<!--通过onclick调用setY()函数，进行y设置-->
y: <input type="text" value="10" name="y" id="y" size="4">
<input type="button"value="设置"
οnclick="setY('region1',document.testform.y.value);">
<!--通过onclick调用setZ()函数，进行z设置-->
z: <input type="text" value="10" name="z" id="z" size="4">
<input type="button"value="设置"
οnclick="setZ('region1',document.testform.z.value);">
</td></tr><tr><td>大小：</td><td>
<input type="text" value="100" name="height" id="height" size="4">
<!--通过onclick调用setHeight()函数，进行高度设置-->
<input type="button"value="设置"
οnclick="setHeight('region1',document.
testform.height.value);">
宽度: <input type="text" value="100" name="width" id="width" size="4">
<!--通过onclick调用setHeight()函数，进行宽度设置-->
<input type="button" value="设置"
οnclick="setWidth('region1',document.
testform.width.value);">
</td></tr><tr><td>裁切：</td><td>
<!--输入新矩形的四边的坐标，作为矩形裁切的参数-->
上: <input type="text" value="0" name="top" id="top" size="4">
左: <input type="text" value="0" name="left" id="left" size="4">
下: <input type="text" value="100" name="bottom" id="bottom" size="4">
右: <input type="text" value="100" name="right" id="right" size="4">
<!--通过onclick调用setClip()函数，进行矩形裁切设置-->
<input type="button" value="设置"
οnclick="setClip('region1',document.testform.top.value,
document.testform.right.value,document.testform.bottom.value,
document.testform.left.value);">
</td></tr><tr><td>内容：</td><td>
<input type="text" name="newcontent" id="newcontent" size="40"
value="这是测试层的新内容！">
<!--通过onclick调用setContents()函数，进行内容设置-->
<input type="button" value="设置内容"
οnclick="setContents('region1',document.testform.
newcontent.value);">
</td></tr></table>
</form>
</body>
</html>
<li>* 在网页样式表定义中，属性position有两个属性值，分别为absolute（绝对位置）和relative（相对位置），这两个值表示定位元素对象的基准点依据。“绝对位置”表示当前元素对象的基准点为上一级元素对象设置的left和top位置。如果上一级元素对象没有设置left和top属性，就以<body>标签对象的原点为基准。“相对位置”表示当前元素对象的位置将按照网页内容顺序排版，相对移动left和top位置。
<li>* 设置“绝对位置”可以不按网页元素顺序精确定位在屏幕上；设置“相对位置”可以使网页元素随浏览器窗口尺寸变化而相对改变。默认状态下，如果没有设置position属性，则表示元素对象的定位基准依据“相对位置”。
<li>* 如果在定位元素的过程中，两个元素对象重叠了，那么，设置样式中的z-index属性可以得到重叠了的两个元素对象的前后顺序。z-index属性值可以设置为auto或者数字。当设置为auto时，按HTML中的顺序，后者会出现在前者上方；当设置为数字时，数值较大的会出现在上方。
<li>* 网页中元素对象的坐标位置和尺寸，可以通过网页样式表的方法或者DOM方法得到。在网页样式表中，定位网页元素对象使用left、top、right、 bottom属性，设置宽度和高度使用width和height属性。这些网页样式属性在JavaScript中使用“网页元素对象.style.网页样式属性名”格式进行引用。通过这种方法可方便设置网页元素对象的位置及尺寸，但是只有在网页样式表中定义了上述属性时，JavaScript才可对其进行引用。
<li>* DOM提供了各种类型的元素对象定位及尺寸属性，这些属性基本上只用于读取，而不可进行设置，使用时的语法规则是“网页元素对象.DOM属性名”。其中，属性名中包含“client”的宽度和高度表示真正能够显示网页内容的区域；属性名中包含“offset”的宽度和高度表示包括了元素对象边线在内的所有区域；属性名中包含“scroll”的宽度和高度表示包含所有全部网页内容的区域。
<li>* 在网页样式表中，除了可以通过z-index控制重叠元素对象之间的显示与隐藏关系外，还可以通过display属性和visibility属性控制元素对象内容的显示与隐藏。display属性和visibility属性的用法和效果比较相似。如果设置display属性值为block，或设置 visibility属性值为visible，都可以显示元素对象内容；反之，设置display属性值为none，或者设置visibility属性值为hidden，都将隐藏元素对象内容。
<li>* 当使用display属性隐藏元素对象时，被隐藏的元素对象将不占位置，其他元素紧接着顺序显示。而使用visibility属性隐藏元素对象时，只是隐藏了当前元素对象的内容，但仍在原位置保留其所占区域。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>样式与定位综合示例</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript">
<!--
//检测对象
var layerobject = ((document.layers) ? (true) : (false));
var dom = ((document.getElementById) ? (true) : (false));
var allobject = ((document.all) ? (true) : (false));
//检测浏览器
opera=navigator.userAgent.toLowerCase().indexOf('opera')!=-1;
//为传递来的layerName值传递对象
function getElement(layerName,parentLayer) //函数：获取layerName的相关属性
{
if(layerobject)
{
parentLayer = (parentLayer)? parentLayer : self;
layerCollection = parentLayer.document.layers;
if (layerCollection[layerName])
return layerCollection[layerName];
//在嵌套层次中搜索
for(i=0; i << layerCollection.length;)
return(getElement(layerName, layerCollection[i++]));
}
if (allobject)
return document.all[layerName]; //设置all[]环境
if (dom)
return document.getElementById(layerName); //设置DOM环境
}
//隐藏 id = layerName 的层
function hide(layerName)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.visibility = 'hide';
else
theLayer.style.visibility = 'hidden'; //设置其他环境
}
//显示 id = layerName的层
function show(layerName)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.visibility = 'show';
else
theLayer.style.visibility = 'visible'; //设置其他环境
}
//设置名为layerName 的层的x坐标
function setX(layerName, x)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.left=x;
else if (opera) //设置在opera中的情况
theLayer.style.pixelLeft=x;
else
theLayer.style.left=x+"px"; //设置其他环境
}
//设置名为layerName 的层的y坐标
function setY(layerName, y)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.top=y;
else if (opera) //设置在opera中的情况
theLayer.style.pixelTop=y;
else
theLayer.style.top=y+"px"; //设置其他环境
}
//设置名为layerName 的层的z-Index
function setZ(layerName, zIndex)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.zIndex = zIndex;
else
theLayer.style.zIndex = zIndex; //设置其他环境
}
//设置名为layerName 的层的高度
function setHeight(layerName, height)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
theLayer.clip.height = height;
else if (opera) //设置在opera中的情况
theLayer.style.pixelHeight = height;
else
theLayer.style.height = height+"px"; //设置其他环境
}
//设置名为layerName 的层的宽度
function setWidth(layerName, width)
{
var theLayer = getElement(layerName);
if (layerobject)
theLayer.clip.width = width;
else if (opera) //设置在opera中的情况
theLayer.style.pixelWidth = width;
else
theLayer.style.width = width+"px"; //设置其他环境
}
//设置由 top、right、bottom和left 定义的名为layerName 的层的矩形裁切
function setClip(layerName, top, right, bottom, left)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
{ //分别设置top、right、bottom和left的值
theLayer.clip.top = top;
theLayer.clip.right = right;
theLayer.clip.bottom = bottom;
theLayer.clip.left = left;
}
else
//设置其他环境
theLayer.style.clip="rect("+top+"px "+right+"px"+""+bottom+"px"+left+"px )";
}
//通过content参数设置layerName 的内容
function setContents(layerName, content)
{
var theLayer = getElement(layerName); //获取layerName的相关属性
if (layerobject)
{
theLayer.document.write(content);
theLayer.document.close();
return;
}
if (theLayer.innerHTML) //设置其他环境
theLayer.innerHTML = content;
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<!--设置2个<div>，进行后面相应的操作-->
<div id="region1" style="position: absolute; top: 90px; left: 200px;
width: 220px; height: 100px;
background-color: #ffffcc; z-index: 10;">
这是一个测试层，顺序为10。
</div>
<div id="region2" style="position: absolute; top: 90px; left: 80px;
width: 220px; height: 120px;
background-color:#33ffcc; z-index: 5;">
这是一个参考层，顺序为5。
</div>
<h2>样式与定位综合示例</h2><hr><br><br><br><br><br><br><br><br>
<form name="testform" id="testform" action="#" method="get">
<table border="1" bordercolor="green" cellspacing="5" cellpadding="5">
<tr><td>可见度:</td><td>
<!--通过onclick分别调用show ()函数和hide()，进行可见度设置-->
<input type="button" value="显示" οnclick="show('region1');">
<input type="button" value="隐藏" οnclick="hide('region1');">
</td></tr><tr><td>位置：</td><td>
<!--通过onclick调用setX()函数，进行x设置-->
x: <input type="text" value="300" name="x" id="x" size="4">
<input type="button"value="设置"
οnclick="setX('region1',document.testform.x.value);">
<!--通过onclick调用setY()函数，进行y设置-->
y: <input type="text" value="10" name="y" id="y" size="4">
<input type="button"value="设置"
οnclick="setY('region1',document.testform.y.value);">
<!--通过onclick调用setZ()函数，进行z设置-->
z: <input type="text" value="10" name="z" id="z" size="4">
<input type="button"value="设置"
οnclick="setZ('region1',document.testform.z.value);">
</td></tr><tr><td>大小：</td><td>
<input type="text" value="100" name="height" id="height" size="4">
<!--通过onclick调用setHeight()函数，进行高度设置-->
<input type="button"value="设置"
οnclick="setHeight('region1',document.
testform.height.value);">
宽度: <input type="text" value="100" name="width" id="width" size="4">
<!--通过onclick调用setHeight()函数，进行宽度设置-->
<input type="button" value="设置"
οnclick="setWidth('region1',document.
testform.width.value);">
</td></tr><tr><td>裁切：</td><td>
<!--输入新矩形的四边的坐标，作为矩形裁切的参数-->
上: <input type="text" value="0" name="top" id="top" size="4">
左: <input type="text" value="0" name="left" id="left" size="4">
下: <input type="text" value="100" name="bottom" id="bottom" size="4">
右: <input type="text" value="100" name="right" id="right" size="4">
<!--通过onclick调用setClip()函数，进行矩形裁切设置-->
<input type="button" value="设置"
οnclick="setClip('region1',document.testform.top.value,
document.testform.right.value,document.testform.bottom.value,
document.testform.left.value);">
</td></tr><tr><td>内容：</td><td>
<input type="text" name="newcontent" id="newcontent" size="40"
value="这是测试层的新内容！">
<!--通过onclick调用setContents()函数，进行内容设置-->
<input type="button" value="设置内容"
οnclick="setContents('region1',document.testform.
newcontent.value);">
</td></tr></table>
</form>
</body>
</html>
2960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
