样式与定位综合示例

原创 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>

HTML表单综合实例

LAMP学员基本信息 LAMP学员基本信息 姓名: 性别: ...
  • ALL_Dash
  • ALL_Dash
  • 2013年08月03日 12:02
  • 882

C++的一些简单示例

1、使用选择排序法对一组数据进行排序#include using namespace std;int main(){ int array[4]; int min; int s...
  • caoyahong114
  • caoyahong114
  • 2016年05月26日 12:05
  • 161

霍夫线变换综合示例

//--------------------------------------【程序说明】------------------------------------------- // 程序描述:霍...
  • zouyu1746430162
  • zouyu1746430162
  • 2016年11月29日 19:14
  • 127

关于css样式绝对定位、相对定位、固定定位的疑难杂症

static relative absolute fixed 之间的关系,区别以及他们的具体用法,有图有真相,看完相信你一定有所收获的。...
  • sinat_31597631
  • sinat_31597631
  • 2017年01月04日 19:34
  • 462

jQuery源码解析(4)—— css样式、定位属性

闲话 原计划是没有这篇博文的,研究animation源码的时候遇到了css样式这个拦路虎。比如jQuery支持“+=10”、“+=10px”定义一个属性的增量,但是有的属性设置时可以支持数字,有的必...
  • vbdfforever
  • vbdfforever
  • 2016年04月04日 23:14
  • 2190

定位样式position的四种定位

定位: position    对元素进行精确的位置调整.    4种定位方式:    1.静态定位(static):默认的,按照文档流的元素排布顺序和自身的属性正常排布.  ...
  • grsghh
  • grsghh
  • 2016年09月22日 20:45
  • 252

html标签之帧标志

教程七、帧标志 1. 2. 3.    帧是由英文Frame翻译过来的,它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧,而多个帧可以同时显示在同一个浏览器窗口中,它们...
  • HackProgramer
  • HackProgramer
  • 2014年06月10日 21:17
  • 662

复选框样式化综合

Checkbox��ʽ body{color:#444;font-size:1.6em;background:#ccc;} .container{width:90%;margin:20px 3...
  • ly2983068126
  • ly2983068126
  • 2015年08月13日 09:41
  • 328

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

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

CSS定位综合实例

CSS定位:position是盒子模型中一个重要的概念。Position有4个属性值:static(静态,无定位),relative(相对定位),absolute(绝对定位),fixed(固定定位)。...
  • BIN_GOO
  • BIN_GOO
  • 2016年08月01日 00:11
  • 192
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:样式与定位综合示例
举报原因:
原因补充:

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