/*width:只能计算元素的内容宽度
* innerWidth():可以获取元素的 内容+padding 的宽度
* outerWidth():可以获取元素的 内容+padding+border 的宽度
* outerWidth(true):可以获取元素的 内容+padding+border+margin 的宽度
*/
/*例子*/
/*计算产品块标签页导航条的宽度:获取所以导航项,将其宽度累加*/
var proTabs = $(".wjs_product .nav-tabs");
var allProTabsLi = proTabs.find("li");
var total = 0;
allProTabsLi.each(function(index,value){
/*width:只能计算元素的内容宽度
* innerWidth():可以获取元素的 内容+padding 的宽度
* outerWidth():可以获取元素的 内容+padding+border 的宽度
* outerWidth(true):可以获取元素的 内容+padding+border+margin 的宽度*/
total += $(value).innerWidth();
});
proTabs.width(total);
/*使用iScroll实现子元素的滑动*/
var myScroll = new IScroll(".wjs_tabParent",{
scrollX: true, scrollY: false
});

JQuery--计算元素的宽度的更多相关文章

  1. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  2. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  3. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  4. jquery 获取元素的 实际宽度和高度

    jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...

  5. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  6. jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

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

    曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...

  8. 关于jquery计算页面元素数量

    这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...

  9. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  10. css清浮动与动态计算元素宽度

    css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...

随机推荐

  1. React在componentWillMount中请求接口数据结束后再执行render

    1.在getInitialState中初始化isloading,初始值false getInitialState() { return { editionid: '', isloading:false ...

  2. [ javasript ] javascript中的each遍历!

    1.数组中的each var arr = [ "one", "two", "three", "four"]; $.eac ...

  3. 2017.1.16【初中部 】普及组模拟赛C组总结

    2017.1.16[初中部 ]普及组模拟赛C组 这次总结我赶时间,不写这么详细了. 话说这次比赛,我虽然翻了个大车,但一天之内AK,我感到很高兴 比赛 0+15+0+100=115 改题 AK 一.c ...

  4. 廖雪峰Java13网络编程-3其他-1HTTP编程

    1.HTTP协议: Hyper Text Transfer Protocol:超文本传输协议 基于TCP协议之上的请求/响应协议 目前使用最广泛的高级协议 * 使用浏览器浏览网页和服务器交互使用的就是 ...

  5. ios与android设备即时语音互通的录音格式预研说明

    本文虽属原创,但是内容都是来自于网络,参考了大家的微博,以及论坛的总结. 在做语音对讲的时候,将会碰到录制语音格式的问题,因为要考虑自己开发设备的支持的格式,还要考虑其他设备操作系统的支持的格式,以及 ...

  6. 转:五种I/O模型和select函数简介

    源地址:http://blog.csdn.net/jnu_simba/article/details/9070955 一.五种I/O模型 1.阻塞I/O 我们在前面所说的I/O模型都是阻塞I/O,即调 ...

  7. PAT甲级——A1067 Sort with Swap(0, i)

    Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...

  8. 左神算法书籍《程序员代码面试指南》——1_01设计一个有getMin功能的栈

    [题目] 实现一个特殊的栈,在实现栈的基本功能的基础上,再实现返回栈中最小元素的操作. [要求] 1.pop.push.getMin操作的时间复杂度都是O(1).2.设计的栈类型可以使用现成的栈结构. ...

  9. Pyhon基本数据类型

    1.数字 1.布尔型(bool) bool型只有两个值:True和False a = False b = True 2.整形 int型 n = 12 a = "12" 将字符串类型 ...

  10. 图像的K-L变换

    1 问题的提出 2 K-L变换的原理 3 K-L变换的计算过程 4 K-L变换的性质 5 K-L变换的深入讨论 6 K-L变换的应用