JavaScript笔记—–cssText

和大家分享一下自己在cssText在js中遇到的小失误;
先看一个demo(下拉菜单部分代码)
html

<div id="content">
<div class="listbox">
<select id="down" class="downlist">
<option value="0" selected>请选择你想要去的地方</option>
<option value="1" class="home">家园-home</option>
<option value="2" class="forum">社区-forum</option>
<option value="3" class="store">商城-store</option>
<option value="4" class="wenwen">问问-wenwen</option>
<option value="5" class="reading">阅览室-reading</option>
<option value="6" class="job">招聘-job</option>
<option value="7" class="setting">设置-setting</option>
</select>
</div>
</div>

js部分

var downlist = document.getElementsByClassName("downlist");
// 此处循环遍历出有多少下拉select
for ( var i = 0 ; i < downlist.length ; i++ ) {

var input = document.createElement("input");
// 此处input是为了向服务器提交数据
input.id = input.name = downlist[i].id;
input.type = "hidden";

var dl = document.createElement("dl");
downlist.index = i;
var option = document.getElementsByTagName("option");
var otlen = option.length;

dt.onclick = function() {
var dds = this.parentNode.getElementsByTagName("dd");
var listbox = this.parentNode.parentNode;

if ( listbox.className == 'listbox') {
var delay = 0;
listbox.className = 'listbox active';
for ( var a = 0,b = otlen-2; a < otlen - 1 ; a++,b-- ) {
var deg = parseInt(Math.random()*(5- -5+1)+ -5);
delay = a * 100;
//console.log(otlen)
//console.log(b);
//console.log(dds[6]);
dds[b].style.cssText = 'top:'+((a+1)*62+"px")+';left:0;width:300px;-webkit-transition:all 300ms ease'+delay+'ms;-webkit-transform:rotate('+deg+'deg);-moz-transition:all 300ms ease'+delay+'ms;-moz-transform:rotate('+deg+'deg);-ms-transition:all 300ms ease'+delay+'ms;-ms-transform:rotate('+deg+'deg);-o-transition:all 300ms ease'+delay+'ms;-o-transform:rotate('+deg+'deg);transition:all 300ms ease'+delay+'ms;transform:rotate('+deg+'deg);z-index:'+b+';'
}
}else {
listbox.className = 'listbox';
}
}
}
}

解释一下引入demo的作用, 这个demo中用到了cssText,并且出现了错误;
一.cssText的本质?
cssText 的本质就是设置 HTML 元素的 style 属性值。

二.cssText什么样的情况下会出现undefined错误呢?
有一种情况就是没有这个元素的情况下,什么意思呢? 就是你在遍历元素时少遍历一个或多遍历一个,那这样就会出现undefined

三.注意点及思路:
1. 在使用cssText时要注意符号的使用,如果不稍注意可能写了好长的代码最后出现一串串红红的报错
2. 在本案例中出现了标题undefined报错,第一想到是不是符号错误,开始排查错误,检查完没有错误;;
3. 继续往前console.log()检查.(要console主要的代码段看看有没有相关数据);在案例中发现一个粗心的错误:在遍历下拉选项时少遍历一个下拉子元素,这就意味着在遍历样式时会少一个子元素遍历不到; 那这样就会报错;

大神请路过,小白专区.
自己也是学习前端路上的一员,只是将自己在学习过程中解决问题的方法分享给大家,如果文中有不对的地方还请留言指出