JS 写个简易的导航条

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/89020157

其实就是要创建页面元素，然后再创建元素的属性：

var arr=["百度","新浪","腾讯","网易"];
var ul=document.createElement("ul");

 for(var i=0;i<arr.length;i++){
     var li=document.createElement("li");
     /*
     li.style.float="left";
     li.style.height="40px";
     li.style.width="100px";
     li.style.lineHeight="40px";
     li.style.textAlign="center";
     li.style.cursor="pointer";
     */
     li.innerHTML=arr[i];
     ul.appendChild(li);
 }

 ul.setAttribute("style","list-style:none;");
 document.body.appendChild(ul);
 console.log(ul);

这段：

li.style.float="left";
li.style.height="40px";
li.style.width="100px";
li.style.lineHeight="40px";
li.style.textAlign="center";
li.style.cursor="pointer";

可以简写为：

li.setAttribute('style',' float: left;height: 40px;width: 100px;line-height: 40px;text-align: center;cursor: pointer;');

效果图：

css样式：

<style>
    li{
        background-color: orange;
    }
    li:hover{
        background-color: skyblue;
    }
</style>

鼠标悬停会变成skyblue，再这里无法展示。