如何使用JavaScript根據父級的動態高度顯示/隱藏元素？

由於動態內容，當父容器的父容器的計算高度超過336px時，我想顯示一個絕對定位的元素（「讀取更多」鏈接）。閱讀更多鏈接的祖父母容器有一個336px的設置高度和隱藏溢出。我有一個課程，我想添加到閱讀更多鏈接，將它從display：none更改爲display：block。我是JS新手，所以我會很感激任何幫助。如何使用JavaScript根據父級的動態高度顯示/隱藏元素？

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>

感謝，

蘇

來源

2013-07-14 sueanna

在這裏你去 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>

來源

2013-07-14 03:45:08 user2580076

@sueanna讓我知道這是否回答您的問題，如果您有任何問題，請告知我 – user2580076

@sueanna是否解決了您的問題？ – user2580076

這個作品 - 謝謝！ – sueanna

-1

$(document).ready(function(){ 
    if ($(".content").height() >336) { 
     $(".content span").addClass("foo"); 
    } 
});

但我會建議你，如果你閱讀更多的鏈接到其他網頁，而不是顯示在同一頁面上（即。擴展內容），那麼你必須在服務器端做到這一點。

來源

2013-07-14 04:03:40 user2576951

-1。 jQuery沒有標記。抱歉。哈。 – Shawn31313

如何使用JavaScript根據父級的動態高度顯示/隱藏元素？

回答

相關問題