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() ...
随机推荐
- QT设计UI:QT模式对话框打开文件
使用QT模式对话框,并使显示框 为背景色: 方法使用了QCheckBox *native; #include <QCheckBox> 初始化函数代码: //设置默认打开图像位置 nat ...
- C#访问Win 32的一些尝试
使用C#调用Win 32 Api大部分情况下基本只涉及到参数类型的转变,但在遇到Win 32 Api返回LPVOID *lpBuff 时会遇到一些解析遍历难题.lpBuff为二维指针,*lpBuff是 ...
- 腾讯模板引擎template
template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 script id="tpl" type="text/ ...
- H5-data属性的一个问题
关于前端存数据的问题,前面写过一个博客:前端页面存取数据 看个例子: <!DOCTYPE html> <html lang="en"> <head&g ...
- phpstorm 使用
常用快捷 ctrl + / 单行注释 Alt+1 隐藏左侧任务栏 设置 1:control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮 ...
- Laravel Cache 缓存使用
导入:use Cache; Cache::put('key', 'value', $minutes); 添加一个缓存 Cache 门面的 get 方法用于从缓存中获取缓存项,如果缓存项不存在,返回 n ...
- MySql数据库多表操作
一.连接查询[连表查询.多表查询] 当查询结果的列来源于多张表时,需要将多张表连接成一个大的数据集,再选择合适的列返回 mysql支持三种类型的连接查询,分别为: 内连接查询(inner join) ...
- RecyclerView 悬浮/粘性头部效果3种方式
但是以上两种方式onDrawOver()方法实现逻辑对初次查看该段代码要花时间理解.下面代码逻辑(原理一样,同样参考大神代码)相对清晰,易理解 public class StickyDecoratio ...
- 【剑指Offer】46、圆圈中最后剩下的数
题目描述: 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后 ...
- Vue.js大总结
最近回顾了一下Vue.js的基础知识,把认为重要的几个点简单的罗列了出来 vue渐进式的理解 vue可以开发很多插件,可以把很多插件组合到一起,渐进的增加vue的功能 update beforeUpd ...