JavaScript：计算从 <DIV> 中的 CSS 属性到另一个 <DIV> 的值答案

【问题标题】：JavaScript: Calculating a value from a CSS property in a <DIV> to another <DIV>JavaScript：计算从 <DIV> 中的 CSS 属性到另一个 <DIV> 的值
【发布时间】：2009-10-25 06:21:59
【问题描述】：

我是菜鸟，所以这可能是基本的东西，但我试图通过搜索网络来解决这个问题，但没有任何运气。非常感谢任何帮助！

我需要做的是：在页面渲染后向下移动一个浮动 X px，其中 X 是另一个的高度。我已经手动测试了 CSS，将 X px 添加到“Top:”属性，它工作正常，问题是在页面渲染后对六个实例执行此操作。

（我需要这样做的原因是我无法控制来自数据库的输出，否则我会重新排列顺序

该解决方案可以使用 JavaScript 和/或 jQuery，甚至 mootools 根据初始脚本语句加载。

我在最后一个 div 中包含了带有 ID 选择器的代码，我不知道这是否相关，我只是在网上冲浪两天后才感觉到。

非常感谢！

<div id="blogwrap1"> <--! Wraps all blog entries for one page-->

    <div class="blogwrap2"> <--! Same as above, just a second wrap-->

        <div class="entry"> <--! Wraps 1 blog entry-->

            <div class="entry-title"></div>

            <div class="entry-body">

                <div class="links"></div> <--! Here I need to add HEIGHT from "entry-tags" to TOP property -->

            </div>

            <div class="entry-footer">

                <div class="entry-footer-line">

                    <div class="entry-tags"></div> <--! Get HEIGHT property -->

                </div>
            </div>
        </div>
    </div>
</div>

更新！

我在这里放了一个包含 html/CSS 等的包进行测试。

move_div.zip (64,5kb)

我可能不清楚的一件事是“入口标签”的高度应该添加到“链接”类的“顶部”属性中（它不应该替换值）。我要做的是在“entry-tags”根据输入的标签/标签行数改变它的高度时，将 div 相对浮动在同一位置。希望这是有道理的。谢谢！

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

这是您要找的线路吗？

$('div#move_me_down').css('top', $('div#the_one_that_we_need_the_height_from').height()+'px');

【讨论】：

感谢您的快速回复。我认为这不会起作用，因为 div 的唯一类中没有 id - 而且我无法更改 msql/php 的输出。所以它必须解决类选择器。我对吗？此外，我将在 1 小时内更新源代码，因此您可以根据需要亲自尝试。无论如何 - 感谢您的帮助！

【解决方案2】：

无关，但是：

如果您同时加载了 Mootools 和 jQuery，您可能需要纠正它。 $ 运算符在每个运算符中都有不同的含义，因此为其中一个编写的脚本可能不起作用。尝试使用其中一种。

也就是说，这里是在 jquery 中，假设 .entry-tags 和 .links 不在任何其他定位元素中：

var pos = $('.entry-tags:first').position();
$('.links:first').css('top', pos.top);

=========== 实质性编辑，上面的代码留给后代和清晰==============

看到你的澄清问题：

$('.entry').each(function(){
    var height = $(this).children('.entry-tags').height();
    $(this).children('.links').css('top', height);
});

如果您希望 .links 相对于“条目”定位，您可以确保该条目已声明“位置：相对”。定位元素（绝对和相对两者）的位置设置相对于它们的第一个定位父元素。

【讨论】：

就像亚历克斯一样 - 让您快速回复。我无法让您的代码正常工作。我确实尝试过不使用任何其他 javascript 并使用 .ready ，如 jQuerys 主页上所述。加载页面后查看css，高度仍然具有相同的值。我正在上传新代码 - 一个完整的页面，可以这么说，所以如果你愿意，你可以在自己的浏览器上尝试。非常感谢！

【解决方案3】：

我在以前的答案的帮助下解决了这个问题。他们没有开箱即用，但为我指明了正确的方向。非常感谢！以下代码现在可以按预期工作：

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(function(){ 
        jQuery('.entry').each(function(){
        var extra = jQuery(this).find('.entry-tags').height();
        var total = 44 + extra;
        jQuery(this).find('.linkr-bm').css('top', total + 'px');
        }); 
    });
});

【讨论】：