给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. SLAM: 图像角点检测的Fast算法(OpenCV文档)

    官方链接:http://docs.opencv.org/trunk/doc/py_tutorials/py_feature2d/py_fast/py_fast.html#fast-algorithm- ...

  2. (转)Bootstrap 之 Metronic 模板的学习之路 - (2)源码分析之 head 部分

    https://segmentfault.com/a/1190000006684122 下面,我们找个目录里面想对较小的文件来分析一下源码结构,我们可以看到,page_general_help.htm ...

  3. webpack学习(四)— webpack-dev-server

    webpack提供给我们检查压缩代码的功能之外,还提供了1个服务器的插件,这就是webpack-dev-server,利用这个差价我们可以启动个web服务器并时时更新我们的修改. 下面以1个简单的例子 ...

  4. 安卓 九宫格 GridView 的表格布局

    首先,请大家理解一下“迭代显示”这个概念,这个好比布局嵌套,我们在一个大布局里面重复的放入一些布局相同的小布局,那些重复的部分是由图片和文字组成的小控件,图片在上方,文字在下方,之后我们只需要把这些小 ...

  5. windows7下搭建HTTP服务器

      打开控制面板,选择并进入“程序”,双击“打开或关闭Windows服务”,在弹出的窗口中选择“Internet信息服务”下面所有地选项,点击确定后,开始更新服务. 2 更新完成后,打开浏览器,输入“ ...

  6. codeforces 244B-Undoubtedly Lucky Numbers 搜索

    题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...

  7. tp5 权限设置

    ============================== <?php/** * Created by PhpStorm. * User: 14155 * Date: 2018/11/10 * ...

  8. mybatis传入两个String类型的参数

    1.项目spring +mybatis +oracle 2.报错信息: [DEBUG] -- :: org.apache.ibatis.logging.jdbc.BaseJdbcLogger.debu ...

  9. MyBatis学习总结(9)——使用MyBatis Generator自动创建代码

    一.构建一个环境 1. 首先创建一个表: [sql] view plaincopy CREATE TABLE t_user ( USER_ID INT NOT NULL AUTO_INCREMENT, ...

  10. (8). 使用JPA保存数据【从零开始学Spring Boot】

    在看这一篇文档的话,需要先配置好JPA – Hibernate. 总体步骤: (1)   创建实体类Demo,如果已经存在,可以忽略. (2)   创建jpa repository类操作持久化. (3 ...