原型库/ 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

原型库/ CSS

回答

相关问题