我有一个页面，其中包含基于文本内容大小的一类可变高度的元素。在页面加载时，我需要将它们的高度都增加 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 问题:
- How to execute helper function after DOM is ready in meteor
- Running a function AFTER a meteor template is updated
- Callback when all Template items finished rendering in Meteor?
- Meteor : wait until all templates are rendered
但是，这些都不是无缝且相当简单的。这就是为什么你可以使用 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/