通过jquery创建元素“css-绝对值”时的奇怪跳转
我试图“绝对化”以前相对的DOM元素，每次我尝试它时，都会发生一个strang“跳转”，我只是不知道我做错了什么，也不知道如何解决这个问题。
好的，JS_fidle可以在这里找到，http://jsfiddle.net/rhqy3/3/
这是虚拟HTML
<html>
<body>
<br><br><h1>one</h1><br><br><br><br>
<h2>two</h2>
</body>
</html>这是javascript (使用jquery)
jQuery.fn.absolutize = function()
{
return this.each(function()
{
var element = jQuery(this);
if (element.css('position') == 'absolute')
{
return element;
}
alert('now a jump happens, that should not happen')
element.css("position", "absolute");
element.css(element.offset());
return element;
});
}
$(document).ready(function() {
window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
});好的，在两秒钟后，当我想将元素设置为它们的绝对等价物时，就会有一个.跳？！？我也不知道为什么。我尝试了$(element).position()而不是offset()，但没有成功。
更新:澄清- h1保持在原处，h2进行跳转。我测试了google最新版，firefox最新版在上。
我的目标是将元素(vie绝对化jquery插件)设置为它们真正的(而不是跳跃的)等价的css--绝对位置，怎么做呢？我真的很感激你的时间。
更新2：heureka，我已经发现了问题(仍然缺少解决方案)！问题是：DOM太快了，。这个脚本是做什么的:它得到H1元素，它说:将它从相对上下文(正常呈现流)中删除，并将其设置为“绝对”，此时会发生浏览器再流--因为H1不再存在，所有东西都会向上移动。跳跃发生了。这太快了，我们看不见。现在jquery函数转到h2并说“绝对”，但是在这个时刻，H2元素已经有了“新的”相对位置，跳转已经发生了。这就是为什么不是每个人都看到它的原因，，这是一个赛车状态，。如果浏览器要缓慢触发再流，DOM仍然保存旧值。好的，该做什么:我们必须收集所有元素的位置值(将它们保存在某个位置)，然后，在收集了所有的位置值之后，我们更新一个又一个元素。不太确定如何在jquery插件的上下文中这样做，但我将讨论它(今晚，现在开始工作)。
更新3：下面的答案正确地回答了这个问题。经常这样。这不能解决的一个问题(因为我没有要求)是其他元素，它可能依赖于相对定位的元素，然后进行一些再流转换(因为突然绝对性元素消失了)，这个小小的jquery插件解决了这个https://gist.github.com/4051578，它是一个名为jquery.bodysnatch.js的jquery插件，因为它的目的是"jquery插件用绝对定位的自己的克隆替换元素，而隐藏和沉默原始元素“很有趣。
回答 3
Stack Overflow用户
发布于 2012-11-09 15:11:42
这就是你要的!
http://jsfiddle.net/rhqy3/9/
(function($){
$.fn.absolutize = function() {
var elems = [];
this.each(function() {
var element = $(this);
if (element.css('position') == 'absolute') return;
var offset = element.offset();
elems.push({
el: element,
newRules: {
position: 'absolute',
top: offset.top,
left: offset.left
}
});
});
$.each(elems, function(i, obj){
obj.el.css( obj.newRules );
});
};
$(document).ready(function() {
window.setTimeout(function(){
$("h1, h2").absolutize()
}, 2000);
});
})(jQuery);问题是，它正在遍历每个传入的元素，一次将一个元素绝对化，获取偏移量，然后应用它。当它请求h2的偏移时，h1已经从文档流中删除了。
可能有更好的方法来编写代码，但是想法是，在更改元素的每个位置之前先缓存元素的偏移量。
Stack Overflow用户
发布于 2012-11-09 11:00:27
在使其成为absolute之前，需要获得当前元素的协调。
element.css(element.offset());
element.css("position", "absolute");小提琴：http://jsfiddle.net/BYcdn/
Stack Overflow用户
发布于 2012-11-09 11:24:00
试试这个：
jQuery.fn.absolutize = function(){
return this.each(function(){
var element = $(this);
element.css("top",element.position().top);
element.css("left",element.position().left);
//alert(element.position().top);
element.css("position", "absolute");
if (element.css('position') == 'absolute'){
return element;
}
});
}
$(document).ready(function() {
window.setTimeout(function(){$("h1, h2").absolutize()}, 2000)
});
https://stackoverflow.com/questions/13306812
复制相似问题
腾讯云开发者
