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: ...
随机推荐
- Oracle 从 dual 表中查询返回多行记录
同时查询出十条数据 ; 按照这个特性计算两个日期之间的工作日: select days, week as days, to_char(to_date(, 'day') as week from dua ...
- Ifconfig- Linux必学的60个命令
1.作用 ifconfig用于查看和更改网络接口的地址和参数,包括IP地址.网络掩码.广播地址,使用权限是超级用户. 2.格式 ifconfig -interface [options] addres ...
- 记录redis安装及常用命令
Redis安装及常用命令 一.安装 1.下载,解压,进入redis解压目录,make. make PREFIX=目录/redis install :安装到指定目录文件名为redis. 2.将解压目录里 ...
- AMPQ
AMPQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议, 是`应用层协议的一个开放标准,为面向消息的中间件设计`. 由于AMQP是一个网络协议,所以 ...
- Zuul上传文件
对于1M以内的文件上传,无需任何处理,大文件10M以上需要为上传路径添加/zuul前缀,也可使用zuul.servlet-path自定义前缀 如果Zuul使用了Ribbon做负载均衡,那么对于超大的文 ...
- js图片预加载实现!
var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...
- Class绑定v-bind:class
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- PAT甲级——A1009 Product of Polynomials
This time, you are supposed to find A×B where A and B are two polynomials. Input Specification: Each ...
- CSS奇数、偶数、指定数样式
原文: https://blog.csdn.net/wangjia200913/article/details/49615325 语法 :nth-child(an+b) 第一种:简单数字序号写法 ...
- 第一次个人项目【词频统计】——PSP表格
PSP2.1 任务内容 计划完成需要的时间(min) 实际完成需要的时间(min) Planning 计划 45 40 Estimate 估计这个任务需要多少时间,并规划大致工作步骤 30 20 De ...