1

我有以下代码

<!DOCTYPE html>
<html>
<head>
    <title>jQuery goes to DOM-ville</title>
    <style>

        #change-me {
            position:absolute;
            top:500px;
            left:400px;
            font:24px arial;
        }

        #move_up #move_down #color #disappear {
            padding:5px;
        }

    </style>
    <script src="jquery-1.6.2.js"></script>
</head>
<body>
    <button id="move_up">Move Up</button>
    <button id="move_down">Move Down</button>
    <button id="color">Change Color</button>
    <button id="disappear">Disappear/Re-appear</button>

    <div id="change_me">Make me do stuff</div>
    <script>
        $(document).ready(function(){
            $("#move_up").click(function(){
                $("#change_me").animate({top:30}, 200);
            });//end move up
            $("#move_down").click(function(){
                $("#change_me").animate({top:500}, 2000);
            });//end move down
            $("#color").click(function(){
                $("#change_me").css("color","purple");
            });//end color
            $("#disappear").click(function(){
                $("#change_me").toggle("show");
            });//end disappear
        });//end doc ready
    </script>


</body>
</html>

当我在 firefox 中打开 html（jquery 文件位于同一文件夹中）时，firebug 显示的元素的样式规则为 nil，并且向上和向下移动按钮不起作用但是当我更改以下内容时它们会更改相应的 css 样式线

<div id="change_me">Make me do stuff</div>

对此

<div id="change_me" style="position:absolute;">Make me do stuff</div>

一切似乎都再次起作用了，所以我的假设是 head 元素中的任何样式都没有应用于 html 元素，如果是这样，它们的意义何在，如果它们被应用，那么为什么它们会被覆盖。

我的浏览器是 MacOSX 中的 Firefox 11.0

4

1 回答 1

4 
change-me

对比

change_me

两者不一样。

于 2012-04-12T14:30:43.600 回答