zoukankan      html  css  js  c++  java
  • js 获取div的类及js控制图片垂直居中

    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>
  • 相关阅读:
    RMAN异机还原遭遇ORA-19698错误案例
    Linux sendmail发送邮件失败诊断案例(一)
    Oracle system identifier(SID) "xxx" alread exits. Specify another SID
    ORA-12516:TNS:listener could not find available handler with matching protocol stack
    ORACLE编译失效对象小结
    Win7 安装SQL SERVER 2012需要SP1补丁
    SQL SERVER出现大量一致性错误的解决方法
    MS SQL统计信息浅析下篇
    Dell PowerVault TL4000 磁带机卡带问题
    虚拟机VMWARE上ORACLE License 的计算
  • 原文地址:https://www.cnblogs.com/guaiyutou/p/4173836.html
Copyright © 2011-2022 走看看