2

私は、JavascriptライブラリRaphaelを使用していくつかの単純なベクターグラフィックを作成しようとしています。正方形のオブジェクトと湾曲したオブジェクトがあるはずですが、何も表示されていません。誰かが私を助けることができますか？ありがとうございました。

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript"> //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>
4

3 に答える 3

3

スクリプトを<div id="sample-2" style="width:500px; height:500px;">タグの後に移動します

または、単純化のためにjQueryを使用して、onloadハンドラーを使用することを好む人もいます

$(function(){
    // Your code that runs after the DOM is loaded
});

重要なのは、コードがDOMにアクセスしており、DOMが構築された後に実行する必要があるということです。onloadハンドラーから、または使用しているDIVの後に呼び出すと、要素を操作する準備ができていることを確認できます。

于 2012-07-17T19:44:41.307 に答える
2

Javascriptの実行が早すぎます。ブラウザはそれを読み取るときにJavascriptを実行し、DOM要素がロードされていない場合は何もしません。

これを試して：

<html>
    <head>
        <script src="raphael.js"></script>
        <script src="jquery-1.7.2.js"></script>
    </head>

    <body>
        <div id="sample-2" style="width:500px; height:500px;"></div>
        <script type="text/javascript">
            //all your javascript goes here  
            var paper = Raphael("sample-2", 200, 100);
            var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
            var curvePath = paper.path("M110,10s55,25 40,80Z");

            rectPath.attr({
                fill: "green"
            });
            curvePath.attr({
                fill: "blue"
            });
        </script>
    </body>
</html>

楽しんで頑張ってください！

于 2012-07-17T19:46:34.833 に答える
1

@JuanMendes少し混乱しますが、最終的に問題は、DOMの準備が整う前にjs関数が呼び出され、要素がまだ作成されていることです。$(document).ready(function(){})DOMが作成された後にのみスクリプトが実行されるように使用することをお勧めします。彼がなぜそうしなければならないのかと尋ねているので、私はもう一度説明しています。たとえば、彼がした場合：

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){ //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
}
)
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>

DOMの準備ができた後にスクリプトが実行されるため、このスクリプトは機能するはずです。

PS補足として、その場で動的に作成されるコンテンツを操作する場合は、イベントが登録されるように、バインド操作を使用してイベントハンドラーをクリック、ぼかし、ホバーなどとしてアタッチする必要があります。例：

$('#form').on('blur', '#input', function(){
 // code

})

バインド用のドキュメントはhttp://api.jquery.com/on/で確認でき 、.ready（）は http://api.jquery.com/ready/で確認できます。

于 2012-07-17T21:38:02.847 に答える