一、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. linux 使用/proc文件系统 实现用户空间与内核模块之间通信

    项目中可能会用到用户态和内核模块之间进行通信的功能.想到linux系统本身很多通信都是通过/proc文件系统来的,比如修改网络中连接跟踪表连接数限制/proc/sys/net/netfilter/nf ...

  2. Java线程:线程的同步与锁

    一.同步问题提出 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. 例如:两个线程ThreadA.ThreadB都操作同一个对象Foo对象,并修改Foo对象上的数据. public ...

  3. Winform-DataGridView 实现如Excel的粘贴复制

    void AddDataGridView(DataGridView gridView, string s) { s = s.Replace("/", @"\") ...

  4. Redis的Replication(复制)

    文件并发(日志处理)--队列--Redis+Log4Net 分布式中使用Redis实现Session共享(二) http://www.cnblogs.com/stephen-liu74/archive ...

  5. Oracle安装错误“程序异常终止

    Oracle安装错误"程序异常终止.发生内部错误.请将以下文件提供给oracle技术支持部   "程序异常终止.发生内部错误.请将以下文件提供给oracle技术支持部门:" ...

  6. wex5 实战 框架拓展之2 事件派发与data刷新

    一 前言 讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...

  7. spring " expected single matching bean but found 2" 问题一例。

    初入java,使用spring时遇到一个问题,左边是一个接口和实现.右边是service和实现. @Service@Transactional(rollbackFor = Exception.clas ...

  8. java equals和==的区别

    大概说equals和==都比较的是什么: 1. boolean tem = a == b; 首先==比较的肯定是地址,从堆栈的角度说也就是说==比较的是栈上面的内容.因为栈是用来存放地址或是java中 ...

  9. 用PHP调用Oracle存储过程方法

    //建立一个TEST表CREATE TABLE TEST (  ID        NUMBER(16)        NOT NULL,  NAME      VARCHAR2(30)      N ...

  10. MVC系列2-Model

    上一篇我讲了ASP.MET MVC的基础概念,我相信从上一篇,我们可以知道MVC的执行过程.这一篇我们开始讲解Model.我们知道,在我们的应用程序中,大多时候是在遵循业务逻辑通过UI操作数据.所以这 ...