原型 Library/CSS

Question

所以我正在学习如何使用原型并且在大多数情况下它非常简洁，但我在处理一个项目时注意到 $( ).setStyle({}) 不起作用。我不知道为什么，我什至找到了一个教程，将他们的 setStyle 示例复制粘贴到 Brackets 中，但我仍然一无所获。有人知道为什么吗？

示例代码如下：

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

提前致谢！

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

旁注：我建议您学习使用浏览器的开发人员工具。所有主流浏览器都应该有它们。它使检测此类错误变得更加容易，从而增强您的学习过程。

原型 Library/CSS

Prototype Library/CSS

javascript

css

getelementbyid

prototypejs