- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我有一个脚本可以均衡 x 轴上其他元素的高度。该脚本工作得很好......但只有当我使用 jQuery 1.8.3+ 时。该问题似乎是由于 outerHeight()
函数造成的。
我尝试找出 1.8.3+ 版本中对 outerHeight()
进行了哪些类型的更新,但运气不佳。
查看此fiddle jQuery 1.8.3 一切正常。
还有这个fiddle使用 jQuery 1.7.2 脚本中断。
谁能帮忙解释一下为什么会出现这个问题,并希望能解决我的困境! (理想情况下我需要它适用于 jQuery 1.7.1+)
为了进一步说明为什么我要使用 outerHeight()
,当其中一个选择器的顶部/底部有边距或填充 height()
不会成功的。明白我的意思> http://jsfiddle.net
谢谢!
最佳答案
为了解决需要在尚未支持的 jQuery 版本中向 outerHeight()
添加 setter 的问题,我简单地添加了 following helper由jQuery++提供。
var weird = /button|select/i, //margin is inside border
getBoxes = {},
checks = {
width: ["Left", "Right"],
height: ['Top', 'Bottom'],
oldOuterHeight: $.fn.outerHeight,
oldOuterWidth: $.fn.outerWidth,
oldInnerWidth: $.fn.innerWidth,
oldInnerHeight: $.fn.innerHeight
};
/**
* @add jQuery.fn
*/
$.each({
/**
* @function outerWidth
* @parent dimensions
* Lets you set the outer width on an object
* @param {Number} [height]
* @param {Boolean} [includeMargin=false] Makes setting the outerWidth adjust
* for margin. Defaults to false.
*
* $('#hasMargin').outerWidth(50, true);
*
* @return {jQuery|Number} If you are setting the value, returns the jQuery wrapped elements.
*/
width:
/**
* @function innerWidth
* @parent dimensions
* Lets you set the inner height of an object
* @param {Number} [height]
*/
"Width",
/**
* @function outerHeight
* @parent dimensions
* Lets you set the outer height of an object where: <br/>
* <code>outerHeight = height + padding + border + (margin)</code>.
* @codestart
* $("#foo").outerHeight(100); //sets outer height
* $("#foo").outerHeight(100, true); //uses margins
* $("#foo").outerHeight(); //returns outer height
* $("#foo").outerHeight(true); //returns outer height with margins
* @codeend
* When setting the outerHeight, it adjusts the height of the element.
* @param {Number|Boolean} [height] If a number is provided -> sets the outer height of the object.<br/>
* If true is given -> returns the outer height and includes margins.<br/>
* If no value is given -> returns the outer height without margin.
* @param {Boolean} [includeMargin] Makes setting the outerHeight adjust for margin.
* @return {jQuery|Number} If you are setting the value, returns the jQuery wrapped elements.
* Otherwise, returns outerHeight in pixels.
*/
height:
/**
* @function innerHeight
* @parent dimensions
* Lets you set the outer width on an object
* @param {Number} [height]
*/
"Height" }, function(lower, Upper) {
//used to get the padding and border for an element in a given direction
getBoxes[lower] = function(el, boxes) {
var val = 0;
if (!weird.test(el.nodeName)) {
//make what to check for ....
var myChecks = [];
$.each(checks[lower], function() {
var direction = this;
$.each(boxes, function(name, val) {
if (val)
myChecks.push(name + direction+ (name == 'border' ? "Width" : "") );
})
})
$.each($.curStyles(el, myChecks), function(name, value) {
val += (parseFloat(value) || 0);
})
}
return val;
}
//getter / setter
$.fn["outer" + Upper] = function(v, margin) {
var first = this[0];
if (typeof v == 'number') {
first && this[lower](v - getBoxes[lower](first, {padding: true, border: true, margin: margin}))
return this;
} else {
return first ? checks["oldOuter" + Upper].call(this, v) : null;
}
}
$.fn["inner" + Upper] = function(v) {
var first = this[0];
if (typeof v == 'number') {
first&& this[lower](v - getBoxes[lower](first, { padding: true }))
return this;
} else {
return first ? checks["oldInner" + Upper].call(this, v) : null;
}
}
//provides animations
var animate = function(boxes){
return function(fx){
if (fx.state == 0) {
fx.start = $(fx.elem)[lower]();
fx.end = fx.end - getBoxes[lower](fx.elem,boxes);
}
fx.elem.style[lower] = (fx.pos * (fx.end - fx.start) + fx.start) + "px"
}
}
$.fx.step["outer" + Upper] = animate({padding: true, border: true})
$.fx.step["outer" + Upper+"Margin"] = animate({padding: true, border: true, margin: true})
$.fx.step["inner" + Upper] = animate({padding: true})
})
对这个发现非常满意!希望它可以帮助别人。干杯!
关于jQuery outerHeight() 错误 - 在以下版本中无法正常工作1.8.3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14635425/
是否可以获取.outerHeight();的十进制值 现在它返回一个四舍五入的值。 $(window).resize(function() { var div_height_2 = $(".h
更新 fiddle :http://jsfiddle.net/KG3H8/4/ 我用 jquery 扩展了我的 .content 的高度,它有一个基于 % 的填充。 如果我删除填充,它会完美地工作。
我在首次加载具有 outerHeight 的页面时遇到问题。 outerHeight() 返回的值是 27 的倍数。 jQuery $('.entries').each(function(r) {
给定 我想计算父级的高度(包括边距)。我找不到合适的方法。 console.log($('#parent').outerHeight()); //= 14 console.lo
我有一个容器元素,它是它的子元素的布局容器,我必须根据一些属性来安排子元素。 我需要简单的方法来设置元素的 outerHeight,比如, $(e).setOuterHeight(200); jQue
我试图找出元素的外部高度(包括填充),但它似乎不起作用。 总是得到0,是不是元素被隐藏了? 该元素包含在具有“自动”高度的绝对定位元素内,但我认为这不是问题,因为该元素是相对的... 最佳答案 隐藏元
如何向 outerHeight() 函数添加额外的像素? 所以我们有一个变量,它获取 .pg-sect `s outerHeight: var $section = $('.pg-sect').out
根据 JQuery docs outerHeight(true) 函数返回元素的总高度,包括填充边框和边距。我遇到了一个案例,这个 promise 似乎被打破了。这是一个 repro . 这是 htm
我正在尝试通过从窗口大小中减去页眉和页脚值并在文档加载时将内容设置为此值来动态设置网页内容的高度。 每个函数参数都接受一个元素id,以获取元素高度;不包括内容参数。 function setH(he
我正在尝试获取我网站上顶部导航栏的 outerHeight 以进行一些计算,它在加载/重新加载网页时完美运行。但是,当我将 Chrome 开发人员工具中的屏幕方向更改为横向时,它会返回错误的高度。我的
该函数正在将日志打印为- console.log("top:"+$(token_list).outerHeight()); 我希望返回参数值,这样我就可以像这样添加 css 高度: dropdown
我正在尝试在我刚刚通过 .append() 附加到 html 的元素上运行 .outerHeight() 函数 $("#someid").append("something"); var h = $(
我在 jquery 中实现可变页脚脚本时遇到问题。(但是 in JSFiddle 奇怪的是我没有遇到任何问题)。 代码:索引.htm
当 CSS 高度设置为 Auto 时,如何获取充满文本的 div 对象的完整高度? 我尝试了 OuterHeight,它仍然不是 div 对象的完整高度。 JSFiddle:https://jsfid
如果我在 CSS 中编写以下代码: html body { height: 100% } height指window.innerHeight。 有没有办法只使用 CSS 来引用 wind
另一位 Web 开发人员希望卡住最左边的列并允许滚动表格。他找到了这段代码并将其实现到他客户的网站中。该代码完成其工作并按预期工作。 但是,他添加了一些 @media 查询,以使表格的响应速度更快。当
所以我有一个脚本可以均衡 x 轴上其他元素的高度。该脚本工作得很好......但只有当我使用 jQuery 1.8.3+ 时。该问题似乎是由于 outerHeight() 函数造成的。 我尝试找出 1
我正在尝试编写一个小的 jQuery 插件,它将根据 div 的高度垂直居中, 基本上在我的 css 中我有 top: 50%,但由于高度是可变的我需要计算它。 这个的 HTML 看起来像 Multi
我想将一个 div 的 outerheight() 值与另一个 div 的 padding-top 值相加。这是我的功能 var headerHeight = $('header').oute
也许这是一个菜鸟问题,但是...... 我有一个网站,我希望页脚始终出现在同一位置。假设我的用户都使用 >= IE8、Chrome 和 Firefox,我认为这只是获取 Window.outerHei
我是一名优秀的程序员,十分优秀!