DIV/SPAN 标记

DIV 默认为块对象,即前后换行,.style.display="block"。

SPAN 默认为行对象,即前后不换行,.style.display="inline"。

DIV 标记格式:

<div ID="divID" style="divStyle" class="divClass">

  // ID 设置名称, 同时使用样式表中 #divID 样式

  // style 内联样式

  // class 样式类定义

   ...

</div>

DIV 属性

属性 意义
innerHTML DIV 内部 HTML 文本,可动态更改
innerText DIV 内部文本,可动态更改

DIV 的样式表属性

属性 意义
position 位置,相对是 relative, 绝对是 absolute
left X 坐标,pixels
top Y 坐标,pixels
width 宽度
height 高度
clip 显示大小 

clip:rect(top,right,bottom,left)

visibility 显示 visible,隐藏 hidden (IE)

显示 show, 隐藏 hide (NS)

z-index 叠放层次
color 前景色
background 背景色(IE),"#FF0000"红色
background-image 背景图(IE)
layer-background-color 背景色(NS)
layer-background-image 背景图(NS)

通过程序设置这些属性,可产生动态网页的效果。

获得 DIV 对象及样式属性

语法 客户端系统
divID.style.属性

window.divID.style.属性

document.all.divID.style.属性

document.all["divID"].style.属性

Internet Explorer
document.divID.属性

documents.layers["divID"].属性

NetScape

添加新属性:

DIV 对象.新属性 = 值

建立属性引用以提高效率:

DIV 对象.新属性 = parseInt(DIV 对象.属性)

客户端系统判断

if (document.layers) then //  NetScape
if (document.all) then    //  Internet Explorer

DIV 嵌套定义

样式定义:

当 DIV 嵌套定义时,位于内层的 DIV 不能使用内联样式。

对象属性取得:

语法 客户端系统
document.外层 DIV.document.内层 DIV.属性 NetScape
内层 DIV.style.属性 Internet Explorer
内层 DIV.style.pixelleft Internet Explorer 水平位置
内层 DIV.style.pixeltop Internet Explorer 垂直位置
内层 DIV.style.pixelwidth Internet Explorer 宽度
内层 DIV.style.pixelheight Internet Explorer 高度

注意:

  1. 嵌套的 DIV 在 NetScape 中需至顶向下调用。
  2. 嵌套的 DIV 在 Internet Explorer 中的坐标尺寸属性名有所不同。