Question

当由于动态内容而导致其父容器的计算高度超过336px时，我想显示一个绝对定位的元素（“更多”链接）。 read more link的祖父级容器的设置高度为336px，隐藏溢出。我有一个类，我想添加到read more链接，它将从display：none更改为display：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>

谢谢，

苏

Answer 1

你走了 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根据父级的动态高度显示/隐藏元素？

1 个答案: