gpt4 book ai didi

javascript - 如何使用 JavaScript 根据父元素的动态高度显示/隐藏元素?

转载 作者:行者123 更新时间:2023-11-30 06:31:04 25 4
gpt4 key购买 nike

当父容器的计算高度由于动态内容而超过 336 像素时,我想显示一个绝对定位的元素(“阅读更多”链接)。阅读更多链接的祖父容器设置了 336px 的高度和隐藏的溢出。我有一个类我想添加到阅读更多链接,它将把它从显示:无更改为显示: block 。我是 JS 的新手,所以我很感激任何帮助。

http://jsfiddle.net/sueanna/FHhMG/

<style>

body {font-family: arial; font-size: 16px;}

p {line-height: 24px; margin:0 0 24px;}

span {display: none; background: #fff; bottom: 0; line-height: 24px; position: absolute; width: 100%;}

.foo {display: block;}

.frame {height: 336px; overflow: hidden; position:relative;}

</style>

<div class="frame">
<div class="content">
<p>
Wonder Woman is a fictional DC Comics superheroine
created by American psychologist and writer William Moulton Marston.
She first appeared in All Star Comics #8 (December–January 1941).
The Wonder Woman title has been published by DC Comics almost continuously
except for a brief hiatus in 1986.[1] Her depiction as a heroine
fighting for justice, love, peace, and sexual equality has also
led to Wonder Woman being widely considered a feminist icon.
</p>

<p>
During the Silver Age, under writer Robert Kanigher, Wonder Woman's
origin was revamped,[19] along with other characters'.
The new origin story increased the character's Hellenic and mythological
roots: receiving the blessing of each deity in her crib, Diana is
destined to become "beautiful as Aphrodite, wise as Athena, as
strong as Hercules, and as swift as Hermes."
</p>

<span>read more</span>
</div>
</div>

谢谢,

起诉

最佳答案

给你 http://jsfiddle.net/FHhMG/1/

<script>
function load(){
if (document.getElementById("readMore").parentNode.offsetHeight > 336){
alert("hi");
//document.getElementById("readMore").className = "MyClass"
}
}
</script>
<body onload="load()">
<div class="frame">
<div class="content">
<p>
Wonder Woman is a fictional DC Comics superheroine
created by American psychologist and writer William Moulton Marston.
She first appeared in All Star Comics #8 (December–January 1941).
The Wonder Woman title has been published by DC Comics almost continuously
except for a brief hiatus in 1986.[1] Her depiction as a heroine
fighting for justice, love, peace, and sexual equality has also
led to Wonder Woman being widely considered a feminist icon.
</p>

<p>
During the Silver Age, under writer Robert Kanigher, Wonder Woman's
origin was revamped,[19] along with other characters'.
The new origin story increased the character's Hellenic and mythological
roots: receiving the blessing of each deity in her crib, Diana is
destined to become "beautiful as Aphrodite, wise as Athena, as
strong as Hercules, and as swift as Hermes."
</p>

<span id="readMore">read more</span>
</div>
</div>
</body>

关于javascript - 如何使用 JavaScript 根据父元素的动态高度显示/隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17636274/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com