之前写了一个关于滚动条的东西,可是在写的时候发现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. File Transfer

    本博客的代码的思想和图片参考:好大学慕课浙江大学陈越老师.何钦铭老师的<数据结构> 代码的测试工具PTA File Transfer 1 Question 2 Explain First, ...

  2. 二、AspNet Core添加EF的基本方法(简略版):

    _/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...

  3. linux 中的搜索命令

    which 查看可执行文件的位置. whereis 查看文件位置. locate 配合数据库查看文件位置. find 实际搜索硬盘查询文件名称. grep 查找文件内容 一般不常用find命令,因为f ...

  4. hdu1281二分图匹配

    小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些国际象棋里面的"车",并且使得他们不能互相攻击,这当然很简单,但是Gardon限制了只有某些格子才可以放, ...

  5. jquery的ajax与spring mvc对接注意事项

    昨天一直纠结这么一个问题,应用场景是这样的: 这里登陆是通过jquery的ajax传输数据到后台controller类相应的映射mapping接收.本来是想,在后台验证成功之后返回一个视图modelA ...

  6. ECMAScript6 规范

    本文探讨如何将ES6的新语法,运用到编码实践之中,与传统的JavaScript语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,具体可参阅http://jsc ...

  7. ubuntu系统搭建以太坊私有链

    1.安装curl.git apt-get update apt-get install git apt-get install curl 2.安装go curl -O https://storage. ...

  8. Python错误集

    1-->IndentationError:expected an indented block   >IndentationError: unindent does not match a ...

  9. Linux 01 Liunx目录结构及文件基本操作

    Linux目录结构及文件基本操作 1.Linux的文件组织目录结构(遵循FHS标准) FHS(Filesystem Hierarchy Standard)标准:多数Linux版本采用这种文件组织形式, ...

  10. java线程总结3--synchronized关键字,原理以及相关的锁

    在多线程编程中,synchronized关键字非常常见,当我们需要进行"同步"操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只 ...