之前写了一个关于滚动条的东西,可是在写的时候发现JQuery在获取宽度和高度时在不同浏览器中是不一样的,下面发一下代码给给位看官先展示一下:

 $(function(){
$("#main").html(
"$(document).width():"+$(document).width()+
"<br />$(document).height():"+$(document).height()+
"<br />$(window).width():"+$(window).width()+
"<br />$(window).height():"+$(window).height()+
"<br />$(document.body).width():"+$(document.body).width()+
"<br />$(document.body).height():"+$(document.body).height()
);
});

打印出来的截屏如下:

这个是在Chrome中的效果,下面来看一下IE中的:

比较一下吧~我们可以看到,当选择document的时候两个浏览器出现了不同的值,IE中对于document的宽和高都增加了4像素,而对于window和document.body的却很正常,所以打算通过屏幕的大小来设定网站轮廓大小的童鞋还是多用用window的宽和高吧!

ps:document.body在没有内容的时候高度是零,为什么呢?你说为什么呢?哈哈……这么简单的问题就不用我回答了吧~要是还不明白就去看看html的DOM吧~要是还不懂可以给我留言~

关于JQuery获取宽度和高度在chrome和IE下的不同的更多相关文章

  1. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  2. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  3. jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  4. javascript、jquery获取网页的高度和宽度

    javascript: 可视区域宽 :document.documentElement.clientWidth  (width + padding) 可视区域高 :document.documentE ...

  5. jquery获取浏览器的高度和宽度

    <script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...

  6. js和jquery获取屏幕的高度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  7. js和jq获取宽度和高度

    Javascript: console.log(document.body.clientWidth); //网页可见区域宽(body) console.log(document.body.client ...

  8. jquery获取元素对应高度

    https://www.cnblogs.com/sntetwt/p/3823592.html 获取点击元素距离页面的高度 $(select).offset().top - $(document).sc ...

  9. jquery获取三种高度

    反复用到却一直记不住... var a = $(window).height() //设备的高度 var b = $(window).scrollTop() //滚动的高度 var c = $(doc ...

随机推荐

  1. HTML ——Flex弹性布局

    弹性盒布局的使用 1.为父容器添加display:flex或inline-flex属性 (Webkit内核的浏览器,必须加上-webkit前缀.) 容器默认存在两根轴:主轴(main axis)和交叉 ...

  2. 【Uva 10498】满意值

    Description Kaykobad教授把为ACM选手买饭的任务交给了Nasa.Nasa决定买n种不同的食物.然后他询问了m名选手对每种食物的需求量.选手们当然不会给出任何符合逻辑的回答,他们只是 ...

  3. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  4. Azure IoT 技术研究系列5-Azure IoT Hub与Event Hub比较

    上篇博文中,我们介绍了Azure IoT Hub的使用配额和缩放级别: Azure IoT 技术研究系列4-Azure IoT Hub的配额及缩放级别 本文中,我们比较一下Azure IoT Hub和 ...

  5. mui开发app之js将base64转图片文件

    之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...

  6. 【lucene系列学习】排序

    用lucene3实现搜索多字段并排序功能(设置权重)    

  7. button按钮点击不刷新(前端交流学习:452892873)

    <button type="button" value="test" >确认买单</button> 可实现页面点击不刷新效果

  8. Linux(ubuntu)下jdk&tomcat的安装

    1.下载相应版本的jdk及tomcat:sudo wget ${url} 2.解压: tar zxvf jdk-7u79-linux-x64.tar.gz​ tar zxvf apache-tomca ...

  9. 【PHP】文件写入和读取详解

    文章提纲: 一.实现文件读取和写入的基本思路 二.使用fopen方法打开文件 三.文件读取和文件写入操作 四.使用fclose方法关闭文件 五.文件指针的移动 六.Windows和UNIX下的回车和换 ...

  10. 在Linux下的找不同-打补丁

    Q:为什么要找不同,为什么要打补丁? A: 在Linux应用中,作为DBA,我们知道MySQL跑在Linux系统之上,数据库最重要的追求就是性能,"稳"是重中之重,所以不能动不动就 ...