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() ...
随机推荐
- cocos ios Label组件问题
软件:cocos creator v1.9.0 开发的过程中,一直在web上预览,Label组件显示一直没问题.在打包到ios上时,出现问题了: Label组件: 当我们缩小字体,发现没问题了,当我们 ...
- python 爬取妹子
爬取妹子图片 网址:https://www.mzitu.com/jiepai/ 2019-06-13 环境WIN10 1903 python 3.7.3 个人习惯先在IDLE中进行调试 import ...
- Asp.Net Core 中利用QuartzHostedService 实现 Quartz 注入依赖 (DI)
QuartzHostedService 是一个用来在Asp.Net Core 中实现 Quartz 的任务注入依赖的nuget 包: 基本示例如下: using System; using Syst ...
- 09 Django组件之用户认证组件
没有学习Django认证组件之前使用装饰器方法 from django.shortcuts import render, HttpResponse, redirect from app01.MyFor ...
- day37-3 异常处理
目录 异常处理 捕捉异常 raise assert 异常处理 捕捉异常 语法错误无法通过try检测,就像函数一样 try: 1/0 except Exception as e: # Exception ...
- 【转载】InputStreamReader和OutputStreamWriter 的区别和用法
一.InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下: @Test public void Test19() throws Exception { InputStr ...
- vue 登录验证码
vue 登录验证码 最近在开发pc端项目,配合elementui使用 createCode() { var code = ""; var codeLength = 4; //验证码 ...
- es6-Symbol用法
1.symbol概念 这种数据类型提供独一无二值 比如,在JS中,我可以通过数据类型生成变量a=number05,也可以生成b=nubmer05,这两个变量可以说是相等的. 但是用symbol生成的值 ...
- vue-路由使用
路由安装 终端下载路由插件 npm install vue-router --save-dev 配置 在main.js中引入插件 //Router 为自定义名 vue-router 为插件的名字 im ...
- PAT_A1115#Counting Nodes in a BST
Source: PAT A1115 Counting Nodes in a BST (30 分) Description: A Binary Search Tree (BST) is recursiv ...