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

oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在浏览器里没有效果,console.log()也没有输出内容,有人知道这是怎么回事吗?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2.1HTML CSS实现瀑布流布局页面</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript">
    window.load = function(){
        waterfall("main","box");
    };
    function waterfall(parent,box){
        //将main下所有class为box的元素取出来
        var oParent = document.getElementById(parent);
        var oBoxs = getByClass(oParent,box);
        // console.log(oBoxs.length);
        // 计算整个页面显示的列数(页面宽/box的宽)
        var oBoxW = oBoxs[0].offsetWidth;
        // console.log(oBoxW);
        var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
        //console.log(cols);
        //设置mian的宽度
        oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';
    }
    //根据class获取元素
    function getByClass(parent,clsName){
        var boxArr = new Array();//用来存储获取到的所有class为box的元素
        var oElements = parent.getElementsByTagName('*');
        for (var i = 0; i < oElements.length; i++) {
            if(oElements[i].className == clsName){
                boxArr.push(oElements[i]);
            }
        }
        return boxArr;
    }
    </script>
</head>
<body>
    <div id="main">
        <div>
            <div>
                <img src="images/P_00.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_01.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_02.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_03.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_04.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_05.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_06.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_07.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_08.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_09.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_010.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_011.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_012.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_013.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_014.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_015.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_016.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_017.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_018.jpg">
            </div>
        </div>
        <div>
            <div>
                <img src="images/P_019.jpg">
            </div>
        </div>
    </div>
</body>
</html>

我跟着老师写的代码里,不会出现固定宽度,即oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在浏览器里没有效果,另,在控制台上,console.log()也没有输出内容,有哪位知道这是怎么回事吗?

正在回答

4 回答

window.onload=function(){
  waterfall('main','box');
}

是onload不是load  改下效果就出来了



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

你的console.log()没有输出内容,是因为你把这行代码注释了,所以在控制台没有出现你想要的效果。

我的也是在设置main的固定宽度出了问题,不知道是不是兼容性的问题。

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

是ie浏览器吗?ie不支持的吧

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

你这个发现是什么问题了吗,我的也是这个问题,oparent.style,cssText='width:'+oBoxW*cols+'px'没反应没效果

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

举报

0/150
提交
取消

oParent.style.cssText = 'width:' + oBoxW*cols +'px;margin:0 auto';在浏览器里没有效果,console.log()也没有输出内容,有人知道这是怎么回事吗?

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