个人中心
gpt4 book ai didi

javascript - 添加到整个类的 offsetHeight

转载 作者：太空宇宙 更新时间：2023-11-04 13:13:30 25 4
gpt4 key购买 nike

我有一个页面，其中包含基于文本内容大小的一类可变高度的元素。在页面加载时，我需要将它们的高度都增加 20px。

var visibleposts = document.getElementsByClassName("post-contain");
   for(var i =0; i <= visibleposts.length; i++){
     visibleposts[i].style.height = visibleposts[i].offsetHeight + 20 + "px";
   }

这是我使用的代码。我将它放在页面加载时运行的 init() 函数中。但是，我不确定它的工作情况如何，因为它是在 meteor 服务器上运行的。我把它装在 body 上了。像这样:

<head>
  <script src="jquery-2.1.4.min.js"></script>
  <script src="main.js"></script>
</head>
<body onload="init();">
</body>

<template name="FullFeed">
  {{#each posts}}
<!--    <a href="whenisay://{{adjective}}/{{noun}}/{{user}}/{{likes}}/{{date}}/{{_id}}">-->
    <a href="UnLiked.png">
      <div class="post-contain">
        <div class="chant">When I say <span class="varline">{{adjective}}</span> you say <span class="varline">{{noun}}</span></div>
<!--
        <div class="author-box">
          <p>By {{user}}<span class="spacer"> - </span>
            <img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
          </p>
        </div>
-->
      </div>
    </a>
    <div class="author-box">
      <p>By {{user}}<span class="spacer"> - </span>
        <img class="heart" src="UnLiked.png" onclick="console.log('hello');"/>
      </p>
    </div>
  {{/each}}
</template>

如果你想调试它，它运行在http://whensayfeed.meteor.com

最佳答案

作为humble.rumble评论中提到，您的代码无法正常工作，因为在加载正文时，模板 FullFeed 还没有生成任何“.post-contain”div。

您不应该立即在 main.js 中执行修改模板生成的 DOM 的代码，而是使用 Template.myTemplate.onRendered回调注册函数。 更新: Meteor 的 Template.myTemplate.onRendered 不等待加载单个数据。加载所有元素后如何附加回调有很多解决方案。查看其他 StackOveflow 问题:

但是，这些都不是无缝且相当简单的。这就是为什么你可以使用 MutationObserver反而。在您的情况下，您想观察添加的 <a/>元素进入 <body/> , 然后找到 .post-contain :

new MutationObserver(function (mutations){
    mutations.forEach(function (mutation){
        $(mutation.addedNodes).each(function (){
            if (this.localName == "a")
                var myNewDiv = $(".post-contain",this)[0]
        });
    });
}).observe($("body")[0], {childList: true});

由于我不熟悉模板 API，模板全局变量可能在文档加载之前不可用，在这种情况下，您将使用 JQuery 的 .ready( handler )

既然您包含了 JQuery，那么您也可以使用它来设置高度。尝试 .height( function ) .在您的情况下，它看起来像这样:

$(".post-contain").height(function (index, height) {
    // Increase the height of all ".post-contain" divs
    return (height + 20);
});

所有这些组合在一起然后产生以下结果:

$(function(){
    new MutationObserver(function (mutations){
        mutations.forEach(function (mutation){
            $(mutation.addedNodes).each(function (){
                if (this.localName == "a")
                    $(".post-contain",this).height(function (index, height){
                        return (height + 20);
                    });
            });
        });
    }).observe($("body")[0], {childList: true});
});

我已经在本地 Meteor 安装上对此进行了测试。

对了，为什么要这样加上高度呢？然后您将不得不处理其他事件，例如 .resize() .如果您希望 div 具有基于内容的额外高度，为什么不使用 CSS padding相反？

关于javascript - 添加到整个类的 offsetHeight，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30813934/

25 4 0
文章推荐： java - 为什么使用整数而不是 double ？
文章推荐： c++ - 我怎样才能忽略 Xcode 中的一些错误？
文章推荐： java - 循环和逻辑语句
文章推荐： javascript - 使用 jquery 及其选项的 dropzone
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com