给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. js基础--获取浏览器当前页面的滚动条高度的兼容写法

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

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

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

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

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

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

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

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

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

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

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

  9. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

随机推荐

  1. Java基础教程

    http://www.runoob.com/java/java-environment-setup.html

  2. ios8/sdk8/xcode6/iphone6(+)适配

    AppIcon https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Ic ...

  3. 单片机模拟 1/2 Bias、1/4 Duty的 LCD 驱动使用方法

    工作原理 方式一     根据 LCD 的驱动原理可知,LCD 像素点上只能加上 AC 电压,LCD 显示器的对比度由 COM脚上的电压值减去 SEG 脚上的电压值决定,当这个电压差大于 LCD 的饱 ...

  4. 一起聊聊 Swift 3.0

    Swift3.0将会给我们带来哪些改变: 1. 稳定二进制接口(ABI) ABI是什么呢?API大家都知道是应用程序接口 API只是提供函数签名 而ABI是系统和语言层面的 如果ABI稳定 意味着以后 ...

  5. 使用Eclipse建立Maven的SpringMVC项目

    非常感谢博客的大神,让我成功地构建项目 http://limingnihao.iteye.com/blog/830409 但在依照这篇文章构建构建时遇到了一些问题,在这里总结一下: 问题一.2.3.2 ...

  6. winform渐变窗口显示/关闭

    //渐渐的消失 for (int iNum = 10; iNum >= 0; iNum --) { //变更窗体的不透明度 this.Opacity = 0.1 * iNum; //暂停 Sys ...

  7. Mvc4.0 提取 Cookie 里的东西

    /// <summary> /// 提取Cookie /// </summary> /// <returns></returns> public sta ...

  8. js操作string它substr方法

    substr 方法 从指定的指定起始位置的长度返回一个子. stringvar.substr(start [, length ]) 參数 stringvar 必选项. 要提取子字符串的字符串文字或 S ...

  9. python中时间日期格式化符号:

    %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数(0-23) %I 12小时制小时数( ...

  10. Android ImgView属性

    ImageView是用于界面上显示图片的控件. 属性 1.为ImageView设置图片 ①android:src="@drawable/img1": src设置图片,默认图片等比例 ...