给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. 《计算机图形学基础(OpenGL版)》勘误表

    第1版第1次印刷: 所在页码 所在行 原内容 更正为 41 16 k=Δx/Δy k=Δy/Δx 46 6 s-t=2Δy/Δx(xi+1)+2b+2yi-1 s-t=2Δy/Δx(xi+1)+2b- ...

  2. hexo搭建博客

    在使用hexo搭建个人博客的时候,修改.yml文件后出现错误:FATAL can not read a block mapping entry; a multiline key may not be ...

  3. vue中eventbus 多次触发的问题

    相比于react,vue是一个更上手很快的框架.所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的.组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意 ...

  4. SqlLite提高批量插入速度的方法及原因分析

    (1)-SQLite忽略大小写查询大部分数据库在进行字符串比较时,对大小写是不敏感的.但是SQLite却是大小写敏感的.如果想让SQLite忽略大小写,方法如下:方法一:使用大小写转换函数LOWER. ...

  5. greenplum资源队列

    1.创建资源队列语法 Command:     CREATE RESOURCE QUEUEDescription: create a new resource queue for workload m ...

  6. HTML学习笔记之基本介绍

    超文本标记语言 (Hyper Text Markup Language,HTML)不是一种编程语言,而是一种标记语言,用一套标记标签描述网页 HTML 标记标签又被称为 HTML 标签(HTML Ta ...

  7. python项目开发:用RabbitMQ实现异步RPC

    程序要求: 1. 用Rabbit MQ实现RPC 1. 可以异步地执行多条命令 2. 可以对一次性对多个机器执行命令 程序效果: --->run dir host1 host2 .... --- ...

  8. Golang - 开篇必须吹牛逼

    目录 Golang - 开篇必须吹牛逼 Go牛逼吗 安装环境 Golang - 开篇必须吹牛逼 (1)我们为什么要学 高并发 深度 || 广度 (2)go学习思路和目标 多打多练 掌握go语言 做一个 ...

  9. IMSI MCC MNC概念

    TelephonyManager telManager = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE); /** 获取 ...

  10. 浅谈 Mysql

    数据库一些基本的概念 Mysql 基础操作 Mysql 数据类型 Mysql 表的完整性约束 Mysql 表的操作 Mysql 数据增删改查语句 Mysql 多表查询 Mysql 索引原理及分类 My ...