在js中设置cssText样式,关于Cannotreadpropertystyleofundefinedjs报错

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主要的代码段看看有没有相关数据);在案例中发现一个粗心的错误:在遍历下拉选项时少遍历一个下拉子元素,这就意味着在遍历样式时会少一个子元素遍历不到; 那这样就会报错;

---

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