- 浏览: 219250 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
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 446一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 483一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 565话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1487Web前端开发和JS面向对象编程分享 一、前端 ... -
网格(UED所谓栅格化)方案生成器
2015-09-03 14:30 481本文转载于:http://www.tw ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 620让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 688现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 583一般情况下,元素拥有默认的white-space:norm ... -
JS复制内容(兼容IE和Firefox)
2012-11-05 11:46 883// <![CDATA[ function copy_ ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 615<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1640看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
javascript深入理解js闭包,js 闭包
2012-05-28 23:20 692一、变量的作用域 要理解闭包,首先必须理解Javascrip ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 993写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 665/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1522这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 811研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
完美解决IE6不支持position:fixed的bug
2012-04-28 16:50 775废话不多说,先看一下下面这段代码: ? ... -
基于jQuery的控制左右滚动及自动滚动效果
2012-04-27 17:17 807迷上jQuery,相对于原生JavaScript,它是如此 ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 910用一个div作为提示信息或者与用户交互的层控件, ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 646为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ...
相关推荐
js获取浏览器高度和宽度值(多浏览器),需要的看看
js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf
js获取浏览器高度和宽度值.pdf
js获取文本框的值!js获取浏览器高度和宽度值.pdf
js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
javascript获取浏览器的高度和宽度
js获取浏览器窗口宽度、高度 判断浏览器窗口大小改变
JS获取浏览器(IE,FF,Opera)中高度和宽度的详细说明。
1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document...
javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
javascript获取设置div的高度和宽度兼容任何浏览器.docx
NULL 博文链接:https://jsdit.iteye.com/blog/1198868