一、jQuery width() 和 height() 方法

  width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

  height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
      //alert($("#div1").width()); //获取这个元素的宽度,类型是number   跟$("#div1").css("width")获取到的是不一样的这样方法获取到的是string类型的数据
      //$('#div1').width(500);     //设置元素长度,直接传数值,默认加px
      //$('#div1').width('500pt'); //同上,设置了pt 单位
      $('#div1').width(function (index, value) { //index 是索引,value 是原本值
            return value - 100; //无须调整类型,直接计算
      });

     alert($("#div1").height());
         $('div').height(500); //设置元素高度,直接传数值,默认加px
      $('div').height('500pt'); //同上,设置了pt 单位
      $('div').height(function (index, value) { //index 是索引,value 是原本值
            return value - 1; //无须调整类型,直接计算
        });
    /*获取元素的宽高时是不包括border,padding,margin    类型是number方便与以后计算*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
        $("#div1").width(400).height(320);
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
        $("#div1").width(function(index,width){        //这种方法还可以传人一个参数即一个函数
            return width+500+"px";    //虽然可以不加px会智能的添加,但还是建议加上单位,这样更加清晰
        });
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
</body>

二、jQuery innerWidth() 和 innerHeight() 方法

  innerWidth() 方法返回元素的宽度(包括内边距)。

  innerHeight() 方法返回元素的高度(包括内边距)。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").innerWidth());
     alert($("#div1").innerHeight());
    /*获取元素的宽高时是不包括border,margin、只包括padding*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

三、jQuery outerWidth() 和 outerHeight() 方法

  outerWidth() 方法返回元素的宽度(包括内边距和边框)。

  outerHeight() 方法返回元素的高度(包括内边距和边框)。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").outerWidth());
    alert($("#div1").outerHeight());
    /*获取元素的宽高时是不包括margin、只包括padding,border*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

  这两个方法可以传入参数:true(表示包括margin)、false(表示不包括margin(默认))

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      alert($("#div1").outerWidth(true));//传入参数表示在获取元素的宽度的时候,不仅包括padding和border外,还包括margin
    alert($("#div1").outerHeight(false));
    /*获取元素的宽高时是包括margin,padding,border*/
});
</script>
</head>
<body>
    <div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;"></div>
</body>

四、获取文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    var docW = $(document).width();
    var docH = $( document).height();
    var WocW = $(window).width();
    var WocH = $( window).height();
    var so = $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)
    alert(docW);
    alert(docH);
    alert(WocW);
    alert(WocH);
    alert(so);

    //用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。
    //当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。
});
</script>
</head>
<body>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取文档的宽度和高度</div>
<div id="div1" style="background:#003; height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0;">获取浏览器窗口(视口)的宽度和高度</div>
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br />
</body>

不建议使用$("html").height()、$("body").height()这样的高度。原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

$(window).height()值有问题,返回的不是浏览器窗口的高度?原因:网页没有加上<!DOCTYPE>声明。

  

五、元素偏移方法:

  

   1、offset()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
       //alert($("#div1").offset());//返回的是一个对象
       //alert($("#div1").offset().top);//div离视口顶端距离
       //alert($("#div1").offset().left);//div离视口左边距离
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div id="div1" style="height:100px; width:200px; padding:20px; margin:20px; border:2px solid #0F0; margin-left:30px;">获取文档的宽度和高度</div>
</body>

   2、position()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
       alert($("#p1").position().left);//相对于div左边的定位是10px
	   alert($("#p1").offset().left);	//相对于视口左边的距离是20px
    });
});
</script>
</head>
<body>
    <button>action</button>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
    	<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
    </div>
</body>

  3、scroll()

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $("button").click(function(){
     	 alert($(window).scrollTop()); //获取当前滚动条的位置
		// $(window).scrollTop(300); //设置当前滚动条的位置
    });
});
</script>
</head>
<body>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative">
    	<p id="p1" style="position:absolute; left:10px">获取文档的宽度和高度</p>
    </div>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
     <button>action</button>
</body>

  

JQuery_处理元素和浏览器的窗口的尺寸的更多相关文章

  1. JQuery 获取元素到浏览器可视窗口边缘的距离

    获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...

  2. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

  3. 《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)

    1.简介 上一篇讲解和分享了如何获取浏览器窗口的句柄,那么今天这一篇就是讲解获取后我们要做什么,就是利用获取的句柄进行浏览器窗口的切换来分别定位不同页面中的元素进行操作. 2.为什么要切换窗口? Se ...

  4. 获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)

    <style> html,body{margin:0;padding:0;} .d1{margin-left:40px;background:red;width:2000px;height ...

  5. 让html元素随浏览器的大小自适应垂直居中

    转自:http://www.cnblogs.com/linjiqin/archive/2011/06/15/2081362.html 表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高 ...

  6. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  7. -webkit-appearance改变任何元素的浏览器默认风格

    前段时间,公司有个紧急发布会,需要在移动端做一个邀请函的页面.但是在实现下拉框的时候,IOS和安卓展示的效果总是不一样.经过我一番查找,偶然间发现了-webkit-appearance这个样式属性.后 ...

  8. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  9. html5--4-3 source元素-解决浏览器的兼容

    html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...

随机推荐

  1. HTML5--页面自动居中

    注意: margin:0 auto;/**0:上下    auto:左右**/ <html lang="en"> <head> <meta chars ...

  2. 易语言调用windows消息函数

    1.SendMessageCallbackA的调用方法 .版本2 .DLL命令 发送消息返回_, 整数型, "user32.dll", "SendMessageCallb ...

  3. 【转】lower_case_table_names=1 让MySQL不区分大小写

    lower_case_table_names=1 让MySQL不区分大小写! 此前有款网络游戏的数据库是采用MySQL.操作系统是CentOS.部分服务器的操作系统又是Windows. 出现了一个小毛 ...

  4. EntityFramework Core技术线路(EF7已经更名为EF Core,并于2016年6月底发布)

    官方文档英文地址:https://github.com/aspnet/EntityFramework/wiki/Roadmap 历经延期和更名,新版本的实体框架终于要和大家见面了,虽然还有点害羞.请大 ...

  5. viewport设置

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable ...

  6. 递归将Map里的字段名由驼峰转为下划线

    导航 定位 概述 算法设计 递归技巧 代码实现 定位 本文适合于想要使用Java递归地将Map里的Key字段名从驼峰转为下划线,或者想了解如何处理任意递归的Map结构的筒鞋. 概述 在进行多语言混合编 ...

  7. AC6102开发板USB3.0测试和使用说明

    AC6102开发板USB3.0测试和使用说明 概述 AC6102上集成了一颗Cypress 推出的高性能USB3.0传输芯片CYUSB3014,Cypress称之为EZ-USBFX3.该芯片性能强劲, ...

  8. [linux系统]查看内核版本和系统版本方法

    查看内核版本信息的两个命令: uname -a cat /proc/version 查看系统版本的命令: lsb_release -a more /etc/issue cat /etc/redhat- ...

  9. Maven常用的命令

    mvn archetype:generate 产生一个新的项目 mvn compile 会执行 mvn resources:resources    mvn compiler:compile两个过程 ...

  10. AndroidManifest.xml详解(下)

    本文编辑整理自:http://blog.163.com/hero_213/blog/static/39891214201242835410742/ 八.第三层<activity-alias> ...