首页 > 其他 > 详细

解决Cannot read property 'style' of null中样式问题

时间:2018-08-01 10:05:38      阅读:855      评论:0      收藏:0      [点我收藏+]
<script type="text/javascript">
        function updateTime(){
            var timeNow = new Date();
            var hour = timeNow.getHours();
            var minute = timeNow.getMinutes();
            var second = timeNow.getSeconds();
            var millisecond= timeNow.getMilliseconds();

            //获取表盘上的指针进行旋转
            var sec = document.getElementById(seconds);
            var min = document.getElementById("minutes");
            var h = document.getElementById("hours");
            //指针旋转
            sec.style.transform = rotateZ( +(second*360/60 + millisecond * 6/1000)+ deg);
            min.style.transform = rotateZ( + (minute*360/60) + ‘deg)‘;
            h.style.transform = rotateZ( + (hour*360/12 + minute*30/60) +deg);
        }
        setInterval(function () {
            updateTime();
        }, 50)
        updateTime();
        var scales = document.querySelectorAll(.scale);
        var nums = document.querySelectorAll(.num);
        for(var i = 0; i < scales.length;i++){
            scales[i].style.transform = rotateZ( + (i*30)+ deg) translateY(-200px);
            nums[i].style.transform = rotateZ( + (i*-30)+ deg);
        }
    </script>
    <div id="all">
        <div class="second" id="seconds"></div>
        <div class="minute" id="minutes"></div>
        <div class="hour" id="hours"></div>
        <div class="scale"><span class="num">12</span></div>
        <div class="scale"><span class="num">1</span></div>
        <div class="scale"><span class="num">2</span></div>
        <div class="scale"><span class="num">3</span></div>
        <div class="scale"><span class="num">4</span></div>
        <div class="scale"><span class="num">5</span></div>
        <div class="scale"><span class="num">6</span></div>
        <div class="scale"><span class="num">7</span></div>
        <div class="scale"><span class="num">8</span></div>
        <div class="scale"><span class="num">9</span></div>
        <div class="scale"><span class="num">10</span></div>
        <div class="scale"><span class="num">11</span></div>

    </div>

问题在于先写的JS,后写的HTML代码,因此,程序在执行时,先编译的js,这时,HTML还未被解析,因此style属性不能被解析,解决方法就是将HTML文件放到上面去。

解决Cannot read property 'style' of null中样式问题

原文:https://www.cnblogs.com/zhouyu0001/p/9399332.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!