2012-02-16 223 views
0

我想在javascript中使等高度函數,我用getElementsByName方法來完成它,但它似乎不工作,我想挑選最大高度的div和適用於其他具有相同ID的div循環不工作在JavaScript?

equl高度功能

<script type="text/javascript"> 

function equalHeight() { 

var get= document.getElementsByName('jj'); 

for (i=0;i<get.length;i++){ 

    var m = get[i].offsetHeight; 
    alert (m) 

    var n= Math.max(m); 




    document.getElementsByName('jj').style.height= n +"px"; 

} 






    } 

window.onload = equalHeight; 




</script> 

</head> 

<body> 
<div style="margin:0 auto; width:500px;"> 
<div style="border:solid #F00 1px; float:left; width:150px" name="jj">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 

<div name="jj" style="border:solid #F00 1px; float:right; width:150px">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div> 



</div> 
</body> 
</html> 
+0

因爲您的姓名循環之前我已經得到元素本來以爲你就可以只把它稱爲'get.style.height = N +「PX」'內循環。 – Wez 2012-02-16 11:26:16

+0

看看https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/max'的.max()'採取零個或多個數字,你每一次... – Matijs 2012-02-16 11:26:16

+0

一個給它一個號DIV不應該有NAME屬性。由於IE僅查看ID而非NAME,因此IE不會將您的DIV與'getElementsByName'匹配。如果您將其更改爲ID,則其他瀏覽器將不匹配,因爲它們僅查看NAME。如果您仍然使用無效屬性添加NAME + ID,請選擇另一種通過ID獲取元素的方式。 – 2012-02-16 11:36:17

回答

0

我覺得 「equalHeight」 功能應該是:

var get = document.getElementsByTagName('div'), 
    maxHeight = 0, i; 

for (i = 0; i < get.length; i++) { 

    var m = get[i].offsetHeight; 
    if (m > maxHeight) { 
     maxHeight = m; 
    } 
} 

for (i = 0; i < get.length; i++) { 

    get[i].style.height = maxHeight + "px"; 
} 

DIV不支持name屬性,你可以把所有的DIV在父DIV,給家長的div一個「id 「就像這樣:

<div id="parent_div"> 
    <div></div> 
    <div></div> 
</div> 

然後得到的div:

var get = document.getElementById("parent_div").getElementsByTagName("div"); 
+0

大先生,U [R天才要比 – 2012-02-16 11:57:34

-1
for (i=0 ; i<get.length;i++){ 
    var m = get[i].offsetHeight; 
    alert (m) // your are missing an ; here 
    var n= Math.max(m); 
    document.getElementsByName('jj').style.height= n +"px"; 
} 
+0

我只是測試它是否是顯示值,但是我檢查一遍它不工作 – 2012-02-16 11:21:46

1

的問題是,你得到你分配一個新的高度,以同一元素的高度。您需要先獲得最大高度。然後將其分配給所有div。 JSFiddle Demo

function equalHeight() { 
    var divElements = document.getElementsByName('jj'), 
     maxHeight = 0, 
     i = 0; 

    for (i = 0; i < divElements.length; i += 1) { 
     maxHeight = divElements[i].offsetHeight > maxHeight ? divElements[i].offsetHeight : maxheight; 
    } 

    for (i = 0; i < divElements.length; i += 1) { 
     divElements[i].style.height = maxHeight + 'px'; 
    } 
} 
+0

有anthor方式來獲得最大高度。 – 2012-02-16 11:40:34

0

試試這個,首先要所有的div加類名,那些你想成爲相等,即類=「JJ」

function equalHeight() 
{ 
    var el=document.getElementsByTagName("div"); 
    var maxHeight=0; 
    for(var i=0;i<el.length;i++) 
    { 
     if(el[i].className=='jj') 
     maxHeight = el[i].offsetHeight > maxHeight ? el[i].offsetHeight : maxHeight; 
    } 
    for(var i=0;i<el.length;i++) 
    { 
     if(el[i].className=='jj') 
     el[i].style.height = maxHeight + 'px'; 
    } 
} 
window.onload = equalHeight; 
+0

我已經提到getElementsByClassName方法不記名。 – 2012-02-16 12:58:00

+0

好的,我很抱歉。 不知道你通過所有div循環和檢查一類是特別有效的方法。但是現在有沒有人在沒有JQuery的情況下做這些事情......? – 5arx 2012-02-16 13:40:29

+0

我也在問自己。 – 2012-02-16 13:50:18