JS实时获取浏览器窗口尺寸 .
给div实时设置宽度
<div id="detail" style="width: 100%; overflow: scroll;">
</div>
<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;
}
//跟div赋值
var detail = document.getElementById("detail");
detail.style.width = winWidth-4;
}
findDimensions();
//调用函数,获取数值
window.onresize = findDimensions;
</script>
上边在ie下正常,下边的修改可以兼容火狐
<script type="text/javascript">
var winWidth = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winWidth = document.documentElement.clientWidth;
}
//跟div赋值
var detail = document.getElementById("detail");
detail.style["width"] = winWidth - 4 + "px";
}
findDimensions();
//调用函数,获取数值
window.onresize = findDimensions;
</script>
JS实时获取浏览器窗口尺寸 .的更多相关文章
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
- 浏览器窗口尺寸相关的 API 整理图
整理浏览器中和屏幕尺寸相关的 API: 其中和文档相关的属性,例如 innerWidth.innerHeight.event.x.event.y 的单位为 CSS 像素,如果页面存在缩放,则需乘上缩放 ...
- js基础--获取浏览器当前页面的滚动条高度的兼容写法
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...
- js动态获取浏览器或页面等容器的宽高
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...
- easyui时间控件用js实时获取选定的时间的取法
easyui时间控件用js实时获取选定的时间的取法var datetime=$("#id").datetimebox("getValue");不能用 $(& ...
- js自定义获取浏览器宽高
/** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...
- Javascript和JQuery获取浏览器窗口各种尺寸
原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...
- 常用高度——获取浏览器窗口的高度(jquery和js)
一:针对浏览器的常用高度 jquery的用法: <script type="text/javascript"> $(document).ready(function() ...
随机推荐
- Ubuntu 更换阿里源
查看新版本信息 lsb_release -c Ubuntu 12.04 (LTS)代号为precise. Ubuntu 14.04 (LTS)代号为trusty. Ubuntu 15.04 代号为vi ...
- 360 基于 Prometheus的在线服务监控实践
转自:https://mp.weixin.qq.com/s/lcjZzjptxrUBN1999k_rXw 主题简介: Prometheus基础介绍 Prometheus打点及查询技巧 Promethe ...
- html第八节课
导航 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) 1 <script language="javascript&qu ...
- codeforces 244B-Undoubtedly Lucky Numbers 搜索
题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...
- 09.正则表达式re-3.常用的匹配规则
模式 描述 \w 匹配字母.数字及下划线 \W 匹配不是字母.数字及下划线的字符 \s 匹配任意空白字符,等价于[\t\n\r\f] \S 匹配任意非空字符 \d 匹配任意数字,等价于[0-9] \D ...
- js中二维数组的创建方法 2017-04-04 14:50 120人阅读 评论(0) 收藏
法一:var myarr=[[0,1,2],[1,2,3]]; 将[0,1,2]看做原来的0,将[1,2,3]看做原来的1,而二者又分别为子数组 如myarr[0][1]=1,myarr[1][1]= ...
- 编码GBK和GB2312、Unicode、UTF-8
一.编码GBK和GB2312 随着计算机发展,各国已经不满足于单纯用ASCII码: 对于我们来说能在计算机中显示中文字符是至关重要的,所以我们还需要一张关于中文和数字对应的关系表: 一个字节8位二进制 ...
- Top English interview Q&A part 2.
https://www.zhihu.com/question/19666878 1.how do you handle failure? I have always lived by the maxi ...
- 2.3 SVN在myeclipse中的使用
一.将svn插件文件夹复制到myeclipse的dropins目录下,并重启myeclipse 二.从SVN中检查项目到myeclipse 2.打开myeclipse,点击window的show v ...
- 洛谷 P2144 BZOJ 1003 [FJOI2007]轮状病毒
题目描述 轮状病毒有很多变种.许多轮状病毒都是由一个轮状基产生.一个n轮状基由圆环上n个不同的基原子和圆心的一个核原子构成.2个原子之间的边表示这2个原子之间的信息通道,如图1. n轮状病毒的产生规律 ...