解决Cannot read property 'style' of null中样式问题
<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中样式问题的更多相关文章
- TypeError: Cannot red property 'style' of null 错误解决
错误信息如下: JSP代码如下: <c:if test ="${not empty excelErrors}"> <div id="excelError ...
- Cannot read property 'style' of null
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- Uncaught TypeError: Cannot set property 'onclick' of null解决办法
如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set pr ...
- Hexo server报错TypeError: Cannot read property 'utcOffset' of null解决方法
最近刚刚开始使用Hexo,新建了一篇article,运行hexo server时候总是报错Cannot read property 'offset' of null. 最后发现是因为手贱把_confi ...
- echarts Cannot read property 'getAttribute' of null 问题的解决方法
今天在使用echarts练习官方给的实例的时候,代码没有问题 却总是报错“Cannot read property 'getAttribute' of null” 找了好久的文档没有看明白 ... 最 ...
- 解决sweetalert 无故报错 elem.className.replace Uncaught TypeError: Cannot read property 'className' of null
今天碰到这么一个问题,在使用sweetalert的时候时有时无会报错 elem.className.replace Uncaught TypeError: Cannot read property ' ...
- Cannot set property 'innerHTML' of null 问题的解决
错误第一次写web 前端代码,出现了“Cannot set property ‘innerHTML’ of null”的错误代码,然后不知道原因在哪? 解决方案在网上查了下资料,原来是js 代码从上往 ...
- JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...
- day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
转行学开发,代码100天.初写了最简的一段Js代码,即通过document中的innerHTML方法修改一个<p>标签的内容,报以下错误. -"Uncaught TypeErro ...
随机推荐
- video.js 应用于网站需要视频的
http://www.cnblogs.com/lechenging/p/3858181.html
- jQuery 获取元素当前位置offset()与position()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- Hibernate 工具类
1.HibernateConfigUtil.java(HIbernate配置工具类) import org.hibernate.Session; import org.hibernate.Sessio ...
- bzoj4361:isn(dp+容斥+树状数组)
题面 darkbzoj 题解 \(g[i]\)表示长度为\(i\)的非降序列的个数 那么, \[ ans = \sum_{i=1}^{n}g[i]*(n-i)!-g[i+1]*(n-i-1)!*(i+ ...
- 南昌网络赛 Distance on the tree 主席树+树剖 (给一颗树,m次查询ui->vi这条链中边权小于等于ki的边数。)
https://nanti.jisuanke.com/t/38229 题目: 给一颗树,m次查询ui->vi这条链中边权小于等于ki的边数. #include <bits/stdc++.h ...
- 一些很好用但不常用的css属性总结 (持续中......)
在各种框架横行的9012,感觉我们学前端的都变得浮躁了很多,放一张最近流行的神图: 唉,扯远了, 还是整理我的东西吧,路漫漫其修远兮,吾将上下而求索! 1, position:sticky; 粘性定位 ...
- po'j2559 Largest Rectangle in a Histogram 单调栈(递增)
Largest Rectangle in a Histogram Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29498 ...
- Sublime Text 3插件收集
0.Package Control 这个是必须装的,就不多解释了 1.ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件. 2.B ...
- Linux下which命令使用详解(转)
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...
- (转)Mysql数据库之Binlog日志使用总结
使用mysqlbinlog提取二进制日志 原文:http://blog.csdn.net/leshami/article/details/41962243 MySQL binlog日志记录了MySQL ...