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>

附注：我建议您学习使用浏览器的开发人员工具。所有主流浏览器都应该有它们。它可以更容易地检测出这些错误，从而增强您的学习过程。

原型库/ CSS

1 个答案: