js 获取div的类及js控制图片垂直居中
浏览数：52 /
时间：2015年06月09日
js没有document.getElementByClassName 这个方法，只能通过id控制，那就简单的写个方法获取class的方法。代码如下：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>app_details</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link rel="stylesheet" href="http://res.smzdm.com/phone/app_details.css" type="text/css" /> <script> function getElementsByClassName(n){ var classElements = [], allElements = document.getElementsByTagName("*"); for( var i = 0;i<allElements.length;i++){ if(allElements[i].className == n){ classElements[classElements.length] = allElements[i]; } } return classElements; } window.onload = function(){ var siteBoxClassName = getElementsByClassName("site_box"); var sitePicClassName = getElementsByClassName("site_pic"); for(var j = 0;j<siteBoxClassName.length;j++){ var siteBoxHeight = siteBoxClassName[j].offsetHeight; var proPicHeight = sitePicClassName[j].offsetHeight; var top = (siteBoxHeight - proPicHeight) / 2; if( proPicHeight < siteBoxHeight ){ sitePicClassName[j].id ="site-pic" + j; document.getElementById("site-pic" + j).style.marginTop = top + "px"; } } } </script> </head> <body> <div class="details_box" id="details_box"> <div class="site_haitao_wrap"> <div class="site_box"> <a class="site_pic" href="#" target="_blank" rel="nofollow" > <img src=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ src1=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ src2=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ class="proPic" > </a> <div class="site_info"> <a class="site_title" target="_blank" href="#" rel="nofollow" >Gucci 古驰 Rush 狂爱 女士EDT淡香水 75ml322元包邮，新用户另95折还送CK唇彩</a><div class="site_price"><i class="icon"></i><span class="red">￥128.00</span>亚马逊中国</div><div class="grey">1080入1100出在1755之前，我主要用18-70，挂机狗头，这支头和18-55 18-105之间的比较也一直没停过，其实这3个我都用过，简单的评价就是，这就是一个头，剩下的都得靠你自己，真正的区别还真不是态度大，可能还是18-105带个防抖好用点。</div> </div> </div> </div> <div class="site_haitao_wrap"> <div class="site_box"> <a class="site_pic" href="#" target="_blank" rel="nofollow" > <img src=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ src1=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ src2=‘http://img10.360buyimg.com/n1/jfs/t196/4/638907024/362418/5491ea74/5392fea0N1880f026.jpg‘ class="proPic" > </a> <div class="site_info"> <a class="site_title" target="_blank" href="#" rel="nofollow" >75ml322元包邮，新用户另95折还送CK唇彩</a><div class="site_price"><i class="icon"></i><span class="red">￥128.00</span>亚马逊中国</div><div class="grey">剩下的都得靠你自己，真正的区别还真不是态度大，可能还是18-105带个防抖好用点。</div> </div> </div> </div> </div> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
