样式与定位综合示例

原创 2007年10月15日 14:22:00
<li>*     默认状态下,HTML网页中的内容都是按照网页元素的顺序出现的,在网页样式技术出现前,网页内容的排版大都采用“表格”方式进行。使用样式技术后,网页元素的内容可以在网页中精确布局。如果将JavaScript应用在网页样式表有关定位的属性方面,就可以根据用户的操作动态地在网页中布局网页元素。

<li>*     在网页样式表定义中,属性position有两个属性值,分别为absolute(绝对位置)和relative(相对位置),这两个值表示定位元素对象的基准点依据。“绝对位置”表示当前元素对象的基准点为上一级元素对象设置的left和top位置。如果上一级元素对象没有设置left和top属性,就以&lt;body&gt;标签对象的原点为基准。“相对位置”表示当前元素对象的位置将按照网页内容顺序排版,相对移动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="显示" onclick="show('region1');">

            <input type="button" value="隐藏" onclick="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="设置"

                                         onclick="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="设置"

                                        onclick="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="设置"

                                        onclick="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="设置"

                                        onclick="setHeight('region1',document.

                                        testform.height.value);">

           宽度: <input type="text" value="100" name="width" id="width" size="4">

                 <!--通过onclick调用setHeight()函数,进行宽度设置-->

                 <input type="button" value="设置"

                                        onclick="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="设置"

                              onclick="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="设置内容"

                               onclick="setContents('region1',document.testform.

                               newcontent.value);">

      </td></tr></table>

      </form>

</body>

</html>

javascript DOM编程艺术学习笔记(8)网站项目综合运用实例:

在学习完这本后,在课后也提供了一个网站页面的综合实例开发
  • u010092682
  • u010092682
  • 2014年04月18日 14:15
  • 950

JavaScript DOM 编程艺术一书综合示例

在HTML页面结构中,常用到的几个区域是头部区域,使用header元素;导航区域,使用nav 元素;在内容区域可以使用article元素来展示每一页的内容。这些标签元素都是HTML5标签。在使用HTM...
  • watermelonbig
  • watermelonbig
  • 2017年12月11日 00:48
  • 361

线性图像滤波综合示例

//--------------------------------------【程序说明】------------------------------------------- // 程序描述:线...
  • zouyu1746430162
  • zouyu1746430162
  • 2016年11月24日 22:43
  • 190

推荐一个ExtJS的综合示例

  由于ExtJS算是一重量级的客户端框架了,如何把他与传统的Web应用集成也是比较重要的,是所有的地方都用Ext,还是在某些地方使用,另外是每一个页面都引入ext-all.js,还是让整个应用只加载...
  • easyjf
  • easyjf
  • 2008年01月22日 12:52
  • 3414

职业定位测试/职业能力倾向测试

一、职业定位测试  测评解析: T技术/职能型 M管理型 I自主/独立型 O挑战型 S安全/稳定型 C创造/创业型 D服务/奉献型 L生活型 ...
  • julius_lee
  • julius_lee
  • 2013年05月06日 19:54
  • 930

HTML5 -1

1、WEB基础知识(了解)    1、WEB与Internet       1、Internet          全球性计算机互联网络           因特网、国际互联网...
  • yji534123343
  • yji534123343
  • 2018年01月29日 16:28
  • 43

银行业法律法规与综合能力-- 知识点总结

1.2002年开始实施贷款五级分类法,正常、关注、次级、可疑、损失。 关注贷款是指尽管借款人目前有能力偿还贷款本息,但存在一些可能对偿还产生不利影响因素的贷款。次级贷款是指借款人的还款能力出现明显问...
  • u011409644
  • u011409644
  • 2017年06月07日 11:09
  • 501

一个综合性的WPF例子

本例重点:资源的使用,类型转换,将笔刷(这里是LinearGradientBrush)应用于ListBox控件,BitmapEffect, DataTemplate的使用等.http://schema...
  • johnsuna
  • johnsuna
  • 2008年03月09日 15:00
  • 11882

CSS实例(一):漂亮的表格样式

WEB2.0提倡使用div布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   ...
  • qq1162195421
  • qq1162195421
  • 2013年08月19日 21:53
  • 3121

定位样式position的四种定位

定位: position    对元素进行精确的位置调整.    4种定位方式:    1.静态定位(static):默认的,按照文档流的元素排布顺序和自身的属性正常排布.  ...
  • grsghh
  • grsghh
  • 2016年09月22日 20:45
  • 407
收藏助手
不良信息举报
您举报文章:样式与定位综合示例
举报原因:
原因补充:

(最多只允许输入30个字)