为了账号安全,请及时绑定邮箱和手机立即绑定
关注
慕粉3116392

Uncaught TypeError: Cannot read property 'style' of null怎么处理这个问题?

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #my3dspace{

            -webkit-perspective: 800;

            -webkit-perspective-origin: 50% 50%;


            overflow:hidden;

        }

        #pagegroup{

            width:400px;

            height:400px;

            margin:0 auto;


            -webkit-transform-style:preserve-3d;


            position: relative;

        }

        .page{

            width:360px;

            height:360px;

            padding:20px;

            background-color: black;


            color:white;


            font-weight:bold;

            font-size:360px;

            line-height:360px;

            text-align:center;


            position:absolute;

        }

        #page1{

            -webkit-transform-origin:bottom;

            -webkit-transition: -webkit-transform 1s linear;

        }

        #page2,#page3,#page4,#page5,#page6{

            -webkit-transform-origin:bottom;

            -webkit-transition: -webkit-transform 1s linear;

            -webkit-transform: rotateX(90deg);

        }


        #op{

            text-align:center;

            margin: 40px auto;

        }

    </style>


    <script type="text/javascript">


        var curIndex = 1;


        function next(){


            if( curIndex == 6 )

                return;


            var curPage = document.getElementById("page"+curIndex);

            curPage.style.webkitTransform = "rotateX(-90deg)";


            curIndex ++;

            var nextPage = document.getElementById("page"+curIndex);

            nextPage.style.webkitTransform = "rotateX(0deg)";

        }


        function prev(){


            if( curIndex == 1 )

                return;


            var curPage = document.getElementById("page"+curIndex);

            curPage.style.webkitTransform = "rotateX(90deg)";


            curIndex --;

            var prevPage = document.getElementById("page"+curIndex);

            prevPage.style.webkitTransform = "rotateX(0deg)";

        }

    </script>

</head>

<body>

    <div id="my3dspace">

        <div id="pagegroup">

            <div class="page" id="page1">1</div>

            <div class="page" id="page2">2</div>

            <div class="page" id="page3">3</div>

            <div class="page" id="page4">4</div>

            <div class="page" id="page5">5</div>

            <div class="page" id="page6">6</div>

        </div>

    </div>


    <div id="op">

        <a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a>

    </div>

</body>

</html>


2016-10-28 源自:CSS3 3D 特效 3-2 771 浏览 2 回答

运行了你的代码,没有报错啊?我习惯将js代码放到body下面,可以保证dom全部加载完在执行js代码

2016-11-10
回复 1

同上,复制粘贴楼主的代码,运行之后并未发现错误。

2016-11-12
回复 1

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信