给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实时获取浏览器窗口尺寸 .的更多相关文章

  1. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  2. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

  3. 浏览器窗口尺寸相关的 API 整理图

    整理浏览器中和屏幕尺寸相关的 API: 其中和文档相关的属性,例如 innerWidth.innerHeight.event.x.event.y 的单位为 CSS 像素,如果页面存在缩放,则需乘上缩放 ...

  4. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  5. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  6. easyui时间控件用js实时获取选定的时间的取法

    easyui时间控件用js实时获取选定的时间的取法var   datetime=$("#id").datetimebox("getValue");不能用 $(& ...

  7. js自定义获取浏览器宽高

    /** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...

  8. Javascript和JQuery获取浏览器窗口各种尺寸

    原生JS 窗口尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + win ...

  9. 常用高度——获取浏览器窗口的高度(jquery和js)

    一:针对浏览器的常用高度 jquery的用法: <script type="text/javascript"> $(document).ready(function() ...

随机推荐

  1. C# 写入二进制文件

    写入整型25 文件在MiniHex中显示 写入字符串I am happy 0A 6D - 6D - 这一行数据是C#把字符串转换为16进制形式 不知道为啥用MiniHex打开多了个0A 写入空&quo ...

  2. CorelDRAW2019新耀发布会,报名即可领红包!

    ​30年时光荏苒!眨眼风惊雨过. 在1989年的春天,CorelDRAW 1.0正式发布,一经面世就掀起了图形设计行业革命浪潮,这个图形工具不仅给设计师提供了矢量图像.页面设计,更能应用于网站制作.位 ...

  3. BZOJ4756 [USACO17JAN]Promotion Counting晋升者计数

    Description The cows have once again tried to form a startup company, failing to remember from past ...

  4. Day 2 语言元素

    1.变量和类型 在程序设计中,变量是一种存储数据的载体.计算机中的变量是实际存在的数据或者说是存储器中存储数据的一块内存空间,变量的值可以被读取和修改,这是所有计算和控制的基础.计算机能处理的数据有很 ...

  5. vfs:open.c 源码学习

    nameidata路径查找辅助结构 open.c @do_sys_open @get_unused_fd_flags @do_filp_open 1.开始填充nameidata 2.开始填充file ...

  6. 一次由于 MTU 设置不当导致的网络访问超时

    转自:http://weibo.com/ttarticle/p/show?id=2309404140904511340923 API 服务正常,但是调用总是超时.api端日志显示,响应速度很快. ​​ ...

  7. luogu 2483 K短路 (可持久化左偏树)

    题面: 题目大意:给你一张有向图,求1到n的第k短路 $K$短路模板题 假设整个图的边集为$G$ 首先建出以点$n$为根的,沿反向边跑的最短路树,设这些边构成了边集$T$ 那么每个点沿着树边走到点$n ...

  8. 一键安装LNMP(适合centos7)

    1.准备工作,下载源码包 wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2.12-x86_64.tar ...

  9. Emacs学习笔记之主模式笔记

    % 模式相关—————————————————————————— 这里经常用的也就各种语言相对应的模式,有些就没再写进去,比如f90等模式 Fundamental mode 基本模式         ...

  10. (9)使用JdbcTemplate【从零开始学Spring Boot】

    整体步骤: (1)   在pom.xml加入jdbcTemplate的依赖: (2)   编写DemoDao类,声明为:@Repository,引入JdbcTemplate (3)   编写DemoS ...