Prototype Library/CSS

Итак, я изучаю, как использовать прототип, и по большей части это довольно аккуратно, но я заметил, что при работе над проектом, что $() .setStyle ({}) не работает. Я не знаю, почему, я даже нашел учебник, скопировал вставку своего примера setStyle в скобки, и я до сих пор ничего не получаю. Кто-нибудь знает, почему?Prototype Library/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.1, когда последняя версия 1.7.2 (апрель 2014 года) –

Сценарий имеет синтаксические ошибки. Удалите ненужные запятой, например:

<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>

Side Примечание: Я рекомендую вам научиться использовать инструменты разработчика Вашего браузера. Все основные браузеры должны иметь их. Это облегчает обнаружение ошибок, подобных этим, следовательно, улучшает процесс обучения.

источник

2015-09-25 02:12:52 joe

Prototype Library/CSS

ответ

Смежные вопросы