jquery获取元素的宽度

  jquery 是一个很好用的库,封装了很多易使用的简易 api,方便开发者进行 dom 操作。

  今天讨论的是获取元素的宽度,有个小坑需要踩踩,这里记录下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <style>
            .d1 {
                display: inline-block;
                width: 200px;
                height: 200px;
                border: 1px solid #eee;
            }
        </style>
    </head>
    <body>
        <div class=‘d1‘></div>
        <script>
            console.log($(‘.d1‘).width());
            console.log($(‘.d1‘).outerWidth());
        </script>
    </body>
</html>

  这里我是用了两个 api ,一个是 width(),另一个是 outerWidth(),当你想获得的元素是个有边框的元素,并且你将使用它的实际占用宽度,那么就要用 outerWidth() 来获取,2像素不起眼。。。但是会搞乱全部布局~

  两个 console.log ,第一个输出 200,第二个则是 202,见过就记住嗷,width() 获取到的是元素内容宽度。outerWidth() 获取元素占位宽度。

时间: 2024-10-11 17:35:19

jquery获取元素的宽度的相关文章

jquery如何获取元素的宽度和高度

jquery如何获取元素的宽度和高度: 这当然是比较基础的问题,不过有可能初学者还是不够明了,下面就简单介绍一下. 获取元素的宽度: $(selector).width() 获取元素的高度: $(selector).height() selector是选择器,例如id.类和元素选择器登登. 原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4046.html 最为原始地址是:http://www.softwhy.com/forum.ph

jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

以前写代码中,每当需要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都需要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,很好用.完成了原来需要用一段来操作做的工作. 这个方法不适用于window 和 document对象,可以使用.width()代替. 下面是其简单介绍 outerWidth(options) 获取第一个匹配元素外部宽度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. 返回值:Integer 一个

jQuery -&gt; 获取元素的各种过滤器(filter)

通过顺序来选择 顺序选择的过滤器(filter)有 :first 第一个元素 :last 最后一个元素 :even 序号为偶数的元素 :odd 序号为奇数的元素 :eq(n) 序号等于n的元素 :lt(n) 序号小于n的元素 :gt(n) 序号大于n的元素 如果有如下的表格 0 even 1 odd 2 even 3 odd 4 even html代码如下 <table> <tr><td>0</td><td>even</td><

JQuery获取元素的方法总结

JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为"myId"的元素,区分大小写 2.多种jQuery选择器组合 分为两部分:前半部分获取到的是一个元素集合,后半部分可以精确为一个元素,两者相结合,可以获取到想要的元素. 1)前半部分选择器   选择器 实例 说明 .c

Jquery获取元素方法

Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为"myId"的元素,区分大小写 b.多种jQuery选择器组合 b1.jQuery选择器 选择器 实例 说明 .class $('.myClass') 类选择器:可以获取到class为'myClass'的所有元素 element $('p') 获取所有的<p>元素

jquery获取元素索引值index()

jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则

jquery获取元素位置

获取绝对位置坐标——offset()方法 var top = $(selector).offset().top; var left = $(selector).offset().left; 获取相对位置坐标——position()方法 var top = $(selector).position().top; var left = $(selector).position().left; jquery获取元素位置

js/jquery获取元素,元素筛选器

1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previousSbiling; //

Jquery获取元素坐标

获取页面某一元素的绝对X,Y坐标,相对于浏览器窗体,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 例如: var offset = $("#fontsize").position();$(&quo