2012-02-16 239 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