原型庫/ CSS

所以我正在學習如何使用原型，並且大部分它很整潔，但我注意到在處理$（）.setStyle（{}）不工作的項目時工作。我不知道爲什麼，我甚至找到了一個教程，複製他們的setStyle示例粘貼到括號，我什麼都沒有。任何人都知道爲什麼？原型庫/ CSS

這裏的示例代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Prototype examples</title> 
    <script type="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> 
    <script> 
     function setColor(){ 
     $('test').setStyle({ 
      backgroundColor: '#900', 
      fontSize: '12px' 
     }); 
     } 
    </script> 
    </head> 
    <body> 
    <p id="test">Click the button to see the result.</p> 
    <input type="button" value="Click" onclick="setColor();"/> 
    </body> 
</html>

這裏是我的項目代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Protoype</title> 
    <h1>Lighting Effects</h1> 
    <style> 
     #div1{ 
      width:600px; 
      height:350px; 
      background-color: #6699cc; 
     } 
     #div2{ 
      background-color: #aaaaff; 
      width:80px; 
      height:80px; 
      padding:20px; 
      position:relative; 
      left:240px; 
      top:105px; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> 
    <script> 
     function btn1(){ 
      $("div1").setStyle({ 
       background:'radial-gradient(at top left, white, #6699cc)'; 
      }); 
      $("div2").setStyle({ 
       boxShadow:'10px 10px 10px #808080'; 
      }); 
     } 
     function btn2(){ 
      $("div1").setStyle({ 
       background:'radial-gradient(at top right, white, #6699cc)'; 
      }); 
      $('div2').setStyle({ 
       boxShadow:'-10px 10px 10px #808080'; 
      }); 
     } 
     function btn3(){ 
      $('div1').setStyle({ 
       background:'radial-gradient(at bottom, white, #6699cc)'; 
      }); 
      $('div2').setStyle({ 
       boxShadow:'0px -10px 10px #808080'; 
      }); 
     } 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     <div id="div2"> 
      LIGHTS:<br/> 
      <input type="button" id="btn1" value="Top Left" onClick="btn1()"/><br/> 
      <input type="button" id="btn2" value="Top Right" onClick="btn2()"/><br/> 
      <input type="button" id="btn3" value="Bottom" onClick="btn3()"/><br/> 
     </div> 
    </div> 
</body> 
</html>

提前感謝！

來源

2015-09-24 afryingpan

我建議你更新到最新版本。當最新版本是1.7.2（2014年4月）時，您的代碼顯示您正在使用1.7.1 –

腳本有語法錯誤。刪除不必要的分號，如下所示：

<script> 
    function btn1(){ 
     $("div1").setStyle({ 
      background:'radial-gradient(at top left, white, #6699cc)' 
     }); 
     $("div2").setStyle({ 
      boxShadow:'10px 10px 10px #808080' 
     }); 
    } 
    function btn2(){ 
     $("div1").setStyle({ 
      background:'radial-gradient(at top right, white, #6699cc)' 
     }); 
     $('div2').setStyle({ 
      boxShadow:'-10px 10px 10px #808080' 
     }); 
    } 
    function btn3(){ 
     $('div1').setStyle({ 
      background:'radial-gradient(at bottom, white, #6699cc)' 
     }); 
     $('div2').setStyle({ 
      boxShadow:'0px -10px 10px #808080' 
     }); 
    } 
</script>

注意：我建議您學會使用瀏覽器的開發工具。所有主流瀏覽器都應該有它們。它可以更容易地檢測出這些錯誤，從而增強您的學習過程。

來源

2015-09-25 02:12:52 joe

回答

相關問題