我有一个jQuery脚本,它通过普通的CSS宽度属性将元素的宽度设置为50%。
如果我然后输出该元素的outerWidth(true)
以获得精确的像素值,它有时不对应于$(window).width()/2
– 这是基于该网站的主题。 不幸的是,我不能在网上为这种行为带来一个演示。
是否有任何特定的CSS属性可能导致这种差异?
问题是outerWidth()
报告的例如是564px
,但是当我检查Safari检查器时,它说580
。 所以该函数的返回是不正确的,我希望能够知道原因是什么。
演示:
https://users.telenet.be/prullen/this/
https://users.telenet.be/prullen/that/
内容(单击红色选项卡时的灰色区域)应该通过负边距隐藏在加载中,但是由于(错误的?)返回jquery,它不在其中一个主题中(稍微显示)。
console.log调用是:
console.log('window width / 2 = ' + $(window).width()/2); console.log('doc width /2 = ' + $(document).width()/2); console.log('width = ' + defaults.boxWidth); console.log('width = ' + $slider.css('width')); console.log('width = ' + $slider.width()); console.log('width = ' + $slider.outerWidth()); console.log('width = ' + $slider.outerWidth(true));
.outerWidth([includeMargin])
– 返回元素的宽度,以及左右填充,边框和(可选)边距(以像素为单位)。
将[includeMargin]
选项设置为true
会将边距添加到此数字:
.outerWidth(true)
– 返回元素的宽度,以及左右填充,边框和边距 (以像素为单位)。
.width()
– 返回不包含左右填充,边框或边距的无单位像素值。
根据jQuery文档, .width()
和.css(width)
之间的唯一区别是后者包含单位(’px’),其中width()
只返回数字(不带’px’)。
因此,根据定义,如果width()
不包含边距,填充和边框,那么css(width)
也不能
我有一个jQuery脚本,它通过普通的CSS宽度属性将元素的宽度设置为50%。
这是将元素本身(不包括边距,填充或边框)设置为其容器的50%。 如果窗口是容器,那么元素的宽度将是该窗口的50%。
示例:对于宽度为1160像素的窗口,您的脚本将创建一个10%为1160或580像素宽的元素(不包括边距,填充或边框)。
如果我然后输出该元素的
outerWidth(true)
以获得精确的像素值,它有时不对应于$(window).width()/2
。
当您使用outerWidth(true)
查看相同的元素时,现在您要为数字添加边距,填充或边框。
使用我的相同示例:使用1160像素的窗口, $(window).width()/2
将是580.假设您的元素也是580像素, .outerWidth(true)
将添加(或减去)边距,添加边框和添加填充到元素本身,这样你就不会得到580,除非边距,填充和边框都为零。
很自然地,使用不同的“主题”(使用您的定义),元素可能会有不同的填充,边框和边距。 我不能肯定地说,因为我看不到你的任何代码。
只需使用.width()
代替.outerWidth(true)
即可在所有主题中保持一致。
编辑:
在Safari控制台中,我看到body
上有一个边缘,导致你描述的内容。 在consolidated-screen-2.css
表内,你有一个20像素的左边距。
在进行计算时,您必须考虑此身体边距。
由于你的JavaScript没有动态更新,而且这不在jsFiddle中,我无法进一步测试它。 当我在DOM中将边距设置为0时,我无法调用JS重新计算数字而不重新加载页面,这当然会消除我的DOM覆盖。
一种解决方案是在所有计算中坚持使用.width()
(忽略边距)。
另一种解决方案似乎包括将body
边缘设置为零。
编辑2:
你一直说它的报告不正确,但是我的屏幕上有一个半透明的像素标尺实用程序覆盖了以下内容,一切都在检查…
此页面位于1228像素宽的窗口中。 标尺validation了这一点。
console.log('width = ' + $slider.outerWidth(true));
= 1188
1188 加 40像素(左/右边距)= 1228(与标尺相同)
抽屉打开,标尺validation它正好是614像素宽 (没有右边框)。
console.log('width = ' + $slider.css('width'));
= 594像素;
594 加 20像素( body
左边距)= 614(与标尺相同)
console.log('width = ' + $slider.width());
= 594
594 加 20像素( body
左边距)= 614(与标尺相同)
width
和outerWidth(true)
应该是两个不同的东西。 第一个不包括填充,边框或边距 – 第二个不包括。
如果您希望outerWidth
正好是窗口宽度的一半,那么您必须明确地将这些内容考虑outerWidth
:
需要了解更多jQuery教程分享$(element).outerWidth(true)根据主题报告不同?,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
var $el = $('#el'); var wid = $(window).width()/2 - parseInt($el.css('padding-left')) - parseInt($el.css('padding-right')) - parseInt($el.css('border-left')) - parseInt($el.css('border-right')) - parseInt($el.css('margin-left')) - parseInt($el.css('margin-right')) // assumes all those things are set using pixels, not em or percent or something $el.width(wid);
以上就是jQuery教程分享$(element).outerWidth(true)根据主题报告不同?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982131.html