Question

<!doctype html>
<html>
<head><title>This is my first jquery page!</title>
<meta charset="utf-8">
<style type="text/css">

    #change_me {
        position: absolute;
        top: 100px;
        left: 400px;
        font: 24px arial;
    }

    #move_up #move_down #color #disappear {
        padding: 5px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head>
<body lang="en">
    <button id="move_up">Move Up</button>
    <button id="move_down">Move Down</button>
    <button id="move_left">Move Left</button>
    <button id="move_right">Move Right</button>
    <br>
    <button id="color">Change Color</button>
    <button id="disappear">Disappear/Re-appear</button>
    <button id="propchangeme" onclick="alert('The value is: ' + prop1)">Get the Font Value of #change_me</button>

    <div id="change_me">Make Me Do Stuff</div>

    <script type="text/javascript">

        //custom made variables :)
        var prop1 = $("#change_me").css("font");

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

        $("#move_left").click(function() {
            $("#change_me").animate({left:30}, "fast");
        }); //end move left

        $("#move_right").click(function() {
            $("#change_me").animate({left:500}, "slow");
        });

        $("#color").click(function() {
            $("#change_me").css("color", "purple");
        }); //end color

        $("#disappear").click(function(){
            $("#change_me").toggle("slow");
        }); //end disappear

    });//end script
    </script>
</body>
</html>

在显示var prop1 = $("#change_me").css("font");

的行

警报返回的值为空，但如果我将其更改为.css("postion");，则警报将返回可见值（在这种情况下绝对值）。为什么赢得JavaScript警报会显示我的请求值？我怎样才能做到这一点？

如何使JavaScript警报显示具有多个空格的变量

0 个答案: