JQuery--计算元素的宽度
/*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--计算元素的宽度的更多相关文章
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jquery 获取元素的 实际宽度和高度
jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...
- jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度
曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...
- 关于jquery计算页面元素数量
这段jquery计算页面元素数量代码,能不能刷新页面直接输出数量,而不用点计算按钮 <scriptsrc="http://ajax.googleapis.com/ajax/libs/j ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
随机推荐
- 【学术篇】洛谷1550——打井Watering Hole
题目の传送门:https://www.luogu.org/problem/show?pid=1550 精简版题意(本来就精简了不是么):n个点,每个点可以选择打井或从别的有水的点引水,求所有点都有水用 ...
- JedisCluster API 整理
windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ...
- csps模拟测试707172部分题解myc
题面:https://www.cnblogs.com/Juve/articles/11678524.html 骆驼:构造题,留坑 根据5×5的矩形构造成大矩形 毛一琛: mid in the midd ...
- js 类数组转化数组
一.常见类数组集合 (1).arguements function fn(){ var arr = [].slice.call(arguements,0); } (2).HTMLCollection ...
- 安装hadoop伪分布式
修改hosts cat /etc/hosts 127.0.0.1 mo.don.com 创建用户 useradd hadoop passwd hadoop sudo授权 visudo hadoop A ...
- springboot整合aop实现网站访问日志记录
目的: 统一日志输出格式,统计访问网站的ip. 思路: 1.针对不同的调用场景定义不同的注解,目前想的是接口层和服务层. 2.我设想的接口层和服务层的区别在于: (1)接口层可以打印客户端IP,而服务 ...
- Java超简明入门学习笔记(四)
Java编程思想第4版学习笔记(四) 第六章 访问权限控制 访问权限控制是面向对象编程中的重要概念,它划分了类设计者和类使用者的界限.通过设置权限,它一方面告诉类设计者,哪个部分的修改 ...
- apache+flask部署
wsgi方式 1.安装apache 1.解压httpd并进行安装 # tar zxvf httpd-2.2.15.tar.gz # cd httpd-2.2.15 # ./configure - ...
- Numpy数据的操作 * dot() multiply() 的区别
使用numpy时,跟matlab不同: 1.* dot() multiply() 对于array来说,* 和 dot()运算不同 *是每个元素对应相乘 dot()是矩阵乘法 对于matrix来说,* ...
- 去掉IE提示:在此页上的ActiveX控件和本页上的其他部分的交互可能不安全。你想允许这种交互吗?
由于项目需求,需要用到OCX控件.而在IE浏览器中加载OCX控件会有如下提示: 这是因为OCX控件有一个ID,而这个ID注册后IE不认为该OCX控件是安全的.所以,必须把这个控件注册为安全控件. 假设 ...