基本语法
<TABLE
WIDTH=VALUE
HEIGHT=VALUE>
语法解释
通过WIDTH属性定义表格的宽度，HEIGHT属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。
文件范例：10-3.htm
设定表格的宽度和高度。
01
<!--
------------------------------
-->
02
<!--
文件范例：10-3.htm
-->
03
<!--
文件说明：设定表格的宽度和高度
-->
04
<!--
------------------------------
-->
05
<HTML>
06
<HEAD>
07
<TITLE>设定表格的宽度和高度</TITLE>
08
</HEAD>
09
<BODY>
10
<H1>主流的网页设计软件</H1>
11
<TABLE
BORDER=1
WIDTH=400
HEIGHT=100>
12
<TR>
13
<TD>网页图像软件</TD><TD>Fireworks</TD>
14
</TR>
15
<TR>
16
<TD>网页制作软件</TD><TD>Dreamweaver</TD>
17
</TR>
18
<TR>
19
<TD>网页动画软件</TD><TD>Flash</TD>
20
</TR>
21
</TABLE>
22
</BODY>
23
</HTML>
文件说明
第11行定义了表格的宽度为400像素，高度为100像素。
网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
在IE中：
document.body.clientWidth ==>BODY对象宽度
document.body.clientHeight ==>BODY对象高度
document.documentElement.clientWidth ==>可见区域宽度
document.documentElement.clientHeight ==>可见区域高度
在FireFox中：
document.body.clientWidth ==>BODY对象宽度
document.body.clientHeight ==>BODY对象高度
document.documentElement.clientWidth ==>可见区域宽度
document.documentElement.clientHeight ==>可见区域高度
?
在Opera中：
document.body.clientWidth ==>可见区域宽度
document.body.clientHeight ==>可见区域高度
document.documentElement.clientWidth ==>页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==>页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==>0
document.documentElement.clientHeight ==>0
FireFox为：
document.documentElement.clientWidth ==>页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==>页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==>页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==>页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.
可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.
原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.
区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准, 后者指明该页面使用新标准.
1、直接设置选择标记的宽度。首先，在文件中创建一个新的HTML文件和两个select下拉列表
2、然后在顶部的head标记中设置样式表。首先，设置第一个选择标记的宽度。在这里，将select1的样式标签的宽度设置为300px，这是一个精确的值，并设置高度和背景色，以便查看下一步的效果：
3、然后设置select2的宽度。在这里，使用百分比设置宽度。百分比代表整个屏幕的比例，设置为50%：
4、最后，当进入浏览器时，可以看到两个具有不同宽度的选择下拉列表。上面是控制HTML页面中下拉列表宽度的方法：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）