- 浏览: 224641 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
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.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 相对文档的水平座标+垂直方向滚动的量
实现代码
< !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">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
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>
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 485一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 527一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 600话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1557Web前端开发和JS面向对象编程分享 一、前端 ... -
网格(UED所谓栅格化)方案生成器
2015-09-03 14:30 514本文转载于:http://www.tw ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 663让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 726现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 624一般情况下,元素拥有默认的white-space:norm ... -
JS复制内容(兼容IE和Firefox)
2012-11-05 11:46 934// <![CDATA[ function copy_ ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 646<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1684看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
javascript深入理解js闭包,js 闭包
2012-05-28 23:20 733一、变量的作用域 要理解闭包,首先必须理解Javascrip ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 1011写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 699/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1557这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 839研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
完美解决IE6不支持position:fixed的bug
2012-04-28 16:50 839废话不多说,先看一下下面这段代码: ? ... -
基于jQuery的控制左右滚动及自动滚动效果
2012-04-27 17:17 863迷上jQuery,相对于原生JavaScript,它是如此 ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 952用一个div作为提示信息或者与用户交互的层控件, ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 714为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ...
相关推荐
JavaScript 获取文本框的值和浏览器高度和宽度值 在 Web 开发中,获取文本框的值和浏览器的高度和宽度值是非常重要的。这篇文章将详细介绍如何使用 JavaScript 获取文本框的值和浏览器的高度和宽度值。 获取文本框...
在 JavaScript 中,获取浏览器高度和宽度值是非常重要的,下面将详细介绍各种方法: 获取浏览器高度和宽度值 在 JavaScript 中,可以使用多种方法来获取浏览器高度和宽度值,以下是一些常用的方法: 1. 使用 `...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,用于...总之,理解和掌握不同浏览器中获取浏览器高度和宽度的差异是进行跨浏览器开发的关键。通过适配这些差异,我们可以创建更加兼容和用户体验良好的Web应用。
本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 1. **浏览器高度和宽度的获取** - `document.body.clientWidth` 和 `document.body.clientHeight`: 这两个...
浏览器高度和宽度值获取方法汇总 在 Web 开发中,获取浏览器的高度和宽度值是非常重要的,因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而,浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...
首先,我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度,包括工具栏和其他用户界面元素。但请注意,这两个属性并不包括滚动条的宽度和高度。 在Internet Explorer中,获取...
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
### JS 获取浏览器的高度和宽度详解 在Web开发中,经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息,不同的浏览器可能使用不同的属性来达到相同的目的。本篇...
这篇博文“JS 获取浏览器参数”可能探讨了如何利用JavaScript来收集关于用户浏览器的信息,包括但不限于浏览器类型、版本、操作系统、屏幕分辨率等。 首先,我们可以使用`navigator`对象来获取浏览器的基本信息。`...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
这个函数可以获取浏览器的宽度和高度,并将其显示在页面上。 获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这些信息可以帮助我们更好地设计和开发Web应用程序。在这篇文章中,我们讲解了...
1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document...
通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...
获取浏览器窗口的完整宽度和高度可以使用`window.outerWidth`和`window.outerHeight`。这两个属性包含了整个浏览器窗口的像素尺寸,包括菜单、工具栏等。 3. **动态监听窗口尺寸变化**: 有时候我们可能需要在窗口...
通过上述介绍,我们了解了如何使用JavaScript获取当前页面可视区域的高度和宽度,以及浏览器窗口的宽度和高度。这些基本的尺寸信息是进行前端开发不可或缺的一部分,掌握了这些技能,可以更好地进行页面布局和响应式...
我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。
此外,需要注意的是,随着Web技术的发展,用户设备的多样性也日益增加,因此在使用JavaScript获取尺寸信息时,除了使用文档对象模型(DOM)属性和方法之外,还可能需要依赖于CSSOM(CSS对象模型)和HTML元素的实时...