                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息排列效果

DW中編輯在IE瀏覽器中看不到效果，說是限制腳本，設(shè)置了也不好使，是我沒做出效果嗎？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> <style type="text/css"> *{margin:0px;padding:0px;} body{font:"微軟雅黑";font-size:14px;} a{text-decoration:none;} ul,li{list-style:none;} #box{height:auto;width:550px;border:1px solid #aaa;margin:0 auto;overflow:hidden;} .top{height:40px;} .top a{height:16px; width:16px;display:block;float:right;margin:5px;} .btn-list-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px 0px;} .btn-car-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px -34px;} .btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;} .btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;} #box ul li{height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;} .a-img{height:164px;width:164px;display:block;overflow:hidden;} p a,p span{ display:block; line-height:23px; padding-left:10px; } .bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;} .small{height:50px;width:50px;float:left;margin:5px;} </style>
<script type="text/javascript"> // 添加頁面加載完成時的事件,然后執(zhí)行以下代碼。 var listBtn = document.getElementById("btn1"); var carBtn = document.getElementById("btn2");
window.onload =function(){
var listbtn=document.getElementById("btn1");
var carbtn=document.getElementById("btn2");
var imgs=document.getElementsByIdTagName("img")

// 獲取多個圖片對象
?listBtn.onclick = function(){
?// 改變按鈕的class的值 // 改變每一個圖片的路徑以及它的對應(yīng)的父節(jié)點的class的值 }
?listBtn.onclick = function(){
?listBtn.className = "btn-list-off";
? carBtn.className = "btn-car-on";
?? for(var i=0;i<imgs.length;i++)
?? { imgs[i].src = "http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
?? imgs[i].parentNode.className = "a-img small"; } }
?? </script>
</head>
<body>
?<div id="box">
? <div class="top">
? <a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
?? <a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
??? </div>
? <ul> <li>
? <div class="con">
? <a href="#" class="a-img ">
?? <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
??? </a>
??? <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
???? <li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
??<li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
?? <li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
?? <li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
?? <li> <div class="con"> <a href="#" class="a-img"> <img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> </a> <p> <a href="#">白陽</a> <span>遼寧</span> <span>21個共同好友</span> </p> </div> <div class="bottom"> 未分組的好友 </div> </li>
??? </ul> </div> </body> </html>