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() ...
随机推荐
- dubbo之结果缓存
结果缓存,用于加速热门数据的访问速度,Dubbo提供声明式缓存,以减少用户加缓存的工作量. lru 基于最近最少使用原则删除多余缓存,保持最热的数据被缓存. threadlocal 当前线程缓存,比如 ...
- Django 框架入门
1.创建虚拟环境.(如果你想在你的服务器中运行多个项目,那么装虚拟环境是最好的选择) pip install virtualenv pip install virtualenvwrapper 安装好后 ...
- Lua习题练习(9*9乘法表,输出所指定的图像,斐波那契数列)
1. (循环语句的嵌套使用)有 1,2,3,4四个数字,能组成多少个互不相同且无重复数字的 三位数,并输出在屏幕上面2. 计算斐波那携数列的前20个数字,并输出在屏幕上面 .指的是这样一个数列(1,1 ...
- emmmmmm(官宣?)
实验室永远不会是学习的唯一地点,不是吗? 总后悔当初退竞赛,现在却还是选择退出,大概是自己真的不适合吧...
- [Ynoi2011]D1T1
题目大意: 给定一个序列$a_1,a_2,\dots,a_n$,进行$m$次操作,每次操作如下: 1. 给定$x,y,z$,对所有下标为$y,y+x,y+2x,\dots$的元素加上$z$(保证$y\ ...
- [luogu1971 NOI2011] 兔兔与蛋蛋游戏 (二分图博弈)
传送门 Solution 补一篇二分图博弈 这个博客写的很详细qwq: https://www.cnblogs.com/maijing/p/4703094.html Code //By Menteur ...
- JDK环境变量设置(linux)
1.下载jdk1.8版本软件包 2.解压 tar -zxvf jdk1.8.tar.gz mv jdk1.8 /usr/local/ 3.添加环境变量 vim /etc/profile 在文件底部加入 ...
- python第八周:socket网络编程
1.socket网络编程 1.1概念: 网络套接字是跨计算机网络的连接的端点.今天,计算机之间的大多数通信都基于互联网协议;因此大多数网络套接字都是Internet套接字.更准确地说,套接字是一个句柄 ...
- Oracle数据库的性能调整
oracle是一个高性能数据库软件.用户可以通过参数的调整,达到性能的优化.性能优化主要分为两部分:一是数据库管理员通过对系统参数的调整达到优化的目的,二是开发人员通过对应用程序的优化达到调整的目的. ...
- vscode简单使用介绍及个人常用扩展插件
vscode全称Visual Studio Code 是微软开发一款IDE,官方地址 vscode 作为一款前端编辑器功能很强大,灵活,可以根据个人喜好选择扩展插件,而且还支持多种开发语言, 关于v ...