日期:2014-05-16  浏览次数:20543 次

怎样比较多个标签获取并获得最低高度的对象
如题 

我有
HTML code

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>



这4个 li 高度不一致 我想获取 高度最小的 li标签 怎样获取呢 谢谢

------解决方案--------------------
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
       
    </style>
</head>
<body>
<ul>
<li style='height:10px;'>1</li>
<li style='height:30px;'>2</li>
<li style='height:20px;'>3</li>
<li style='height:40px;'>4</li>
</ul>
<script>
    var a = document.getElementsByTagName('li');
    var b = new Array();
    for (var i = 0; i < a.length; i++) {
        b.push(parseInt(a[i].style.height));
        if (parseInt(a[i].style.height) == arrMin(b)) {
            a[i].style.background='red';         
            }
    }
    function arrMin(array) {

        return Math.min.apply(Math,array);

    }
    
   
    
</script>
</body>
</html>

------解决方案--------------------
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul>
  <li style="height:100px;">1</li>
  <li style="height:50px;">2</li>
  <li style="height:40px;">3</li>
  <li style="height:80px;">4</li>
</ul>
<script type="text/javascript">
var obj = document.getElementsByTagName('li');
var maxHeight = 100000;
var idx = '';
for(var i = 0; i < obj.length; i ++) {
    if (obj[i].offsetHeight < maxHeight) {
        maxHeight = obj[i].offsetHeight;
        idx = i;
    }
}

alert('高度最低的是索引号为' + idx + '的li元素');
</script>
</body>
</html>