javascript 获取网页各种宽度

页可见区域宽：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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： 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

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>请调整浏览器窗口</title>

</head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr>

浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"><br>

浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

TML作为一种用来描述网页的语言，是制作网页必不可少的，但HTML 不是一种编程语言，而是一种标记语言 (markup language），本着为了更好的了解大数据开发的基础，今天就带着大家更进一步的了解HTML的使用，HTML的表格与表单。

1.HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的作用就不言而喻了，让看起来更简洁直观有序性。

下面给大家带来一些常用的标签：

<table> 表格的最外层容器

<tr> 定义表格行

<th> 定义表头

<td> 定义表格单元

<caption>定义表格表题

　　<width>:宽度。可以用像素或百分比表示。常用960像素。

　　<border>：边框，常用值为0。

　　<cellpadding>：内容跟边框的距离，常用值为0。

　　<cellspacing>：单元格与单元格之间的间距，常用值为0。

　　<algin>：对齐方式。

　　<bgcolor>：背景色。

<background>：背景图片。

<align>: 一行内容的水平对齐方式。

<valign>: 一行内容的垂直对齐方式。

<height>：行高。

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

举个例子

其中：table用于定义一个表格标签。

tr标签用于定义表格中的行，必须嵌套在 table标签中。

td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

字母 td 指表格数据（table data），即数据单元格的内容。

再比如说我们可以建立个有颜色的格子，如下图

表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。但现在都不怎么使用了，因为时代的进步，以前的表格排版的网页已经被淘汰了。

2. HTML表单

关于表单的制定，因为在浏览器中输入的内容都必须要经过网络提交到服务器端再处理，所以需要把所有的控件都包含在一个form表单控件中，然后一次提交给服务器，再由服务器处理用户提交的数据。

HTML 支持有序列表(有序列表是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。)无序列表(无序列表也是一个项目的列表，此列项目使用粗体圆点“典型的小黑圆圈“进行标记。)和定义列表(自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。)。

表单常用标签：

form: 表单的最外层容器

input: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

Text：普通的文本输入框

Password：密码输入框

Checkbox：复选框

Radio：单选框

File：上传文件

Submit：提交按钮

Reset：重置按钮

Cols：列

Rows：行

注意事项：

<form id="" name="" method="post/get" action="负责处理的服务端">--输入系统时，必须有

Name ：定义表单的名称；

Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get

Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）

Fieldset：把表单分组；

Legend：分组名称。

id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，post提交没有长度限制，且编码后内容不可见。

举个例子

</form>

得到结果如图

本期的内容比较多，大家可以在平日里多加练习，这是大数据开发基础的重要部分，做到能更熟练，更准确，希望大家能有所进步。

多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。

12.1 内外抉择

在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。

这是用padding的学问

（1）需要在border内侧添加空白，在文字与边框留有距离时；

（2）空白处需要背景色时；

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

这是用margin的学问

（1）需要在border外侧添加空白时;

（2）空白处不需要有背景色时;

(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

12.2 内外有别

在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。

在CSS表文件ys2.css中的代码

/*单独指定一个边距*/
.one-margin {
    margin-left: 100px;
}

/*4个边距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代码

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一个值：4个边距;<br/>
        margin两个值：上下边距、左右边距;<br/>
        margin三个值：上边距、左右边距、下边距;<br/>
        margin四个值：上边距、右边距、下边距、左边距。
    </div>
    <div class="use-padding">
        padding一个值：4个边距;<br/>
        padding两个值：上下边距、左右边距;<br/>
        padding三个值：上边距、左右边距、下边距;<br/>
        padding四个值：上边距、右边距、下边距、左边距。<br/>
        为了区分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

输出结果

好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

在线咨询

上一篇：10个免费的HTML在线编辑工具
下一篇：HTML 简单的<thead> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript 获取网页各种宽度

12.1 内外抉择

12.2 内外有别

您的项目需求