为了账号安全,请及时绑定邮箱和手机立即绑定

为什么一加js,css样式的效果就没了

加了js后,css的圆角框,padding之类的都没了http://img1.sycdn.imooc.com//581d82610001ef5012930545.jpg

正在回答

3 回答

同求解

0 回复 有任何疑惑可以回复我~
#1

qq_overdose_4 提问者

真棒,有效果了,谢谢
2016-11-10 回复 有任何疑惑可以回复我~

js部分

window.onload=function(){
   waterfall('main','box');
}
//根据class获取元素
function getByClass(parent,clsName)
{
   var boxArr=new Array();    //用来存储获取到的所有class为box的元素
   oElements=parent.getElementsByTagName("*");  //获取父元素下所有的子元素
   for(var i=0;i<oElements.length;i++)
   {
       if(oElements[i].className=clsName)    //找到要找的元素
       {
           boxArr.push(oElements[i]);
       }
   }
   return boxArr;
}
function getMinhIndex(arr,val)
{
   for(var i in arr)
   {
       if(arr[i]==val)
       {
           return i;
       }
   }
}
function waterfall(parent,box)
{
   //将main下的所有class为box的元素取出来
   var oParent=document.getElementById(parent);
   var oBoxs=getByClass(oParent,box);
   //计算整个页面显示的列数(页面宽/box的宽)
   var oBoxW=oBoxs[0].offsetWidth;
   // 列数
   var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
   //设置main的宽
   oParent.style.cssText='width:'+oBoxW*cols+'px;marign:0 auto';
   var hArr=[];     //存放每一行高度的数组
   for(var i=0;i<oBoxs.length;i++)
   {
       if(i<cols)
       {
           hArr.push(oBoxs[i].offsetHeight);
       }
       else{
           var minH=Math.min.apply(null,hArr);
           var index=getMinhIndex(hArr,minH);
           oBoxs[i].style.position='absolute';
           oBoxs[i].style.top=minH+'px';
           oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
           hArr[index]+=oBoxs[i].offsetHeight;
       }
   }
}

0 回复 有任何疑惑可以回复我~
#1

浅浅妈

我知道了,你的这一句 if(oElements[i].className=clsName) //找到要找的元素 应该是 == ,一个=是赋值,所以实际生成页面的时候,在box下面还有一个box,就导致CSS失效了
2016-11-08 回复 有任何疑惑可以回复我~

源代码是什么?

0 回复 有任何疑惑可以回复我~
#1

qq_overdose_4 提问者

js部分写在下面了,刷新的那一秒是好的,刷新完就变成样式不对了
2016-11-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么一加js,css样式的效果就没了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信