-1

私は以下のコードから何を取得しようとしているのかを理解しようとしています：

var svg   = document.querySelector('svg'),
path  = document.querySelector('path');
var code = document.querySelector('#code');

そして、上記で参照しているコードは次のとおりです。

<textarea id="code">var curve = new CurveAnimator(
 [206,47], [182,280],
 [90,234], [273,101]
);

var o = document.getElementById('img');
o.style.position = 'absolute';

curve.animate(2, function(point,angle){
  o.style.left = point.x+"px";
  o.style.top  = point.y+"px";
  o.style.transform =
    o.style.webkitTransform =
    o.style.MozTransform =
    "rotate("+angle+"deg)";
});
</textarea>

<section>
<svg viewBox="0 0 450 370" width="400px" height="370px" xmlns="http://www.w3.org/2000/svg" class="content">
    <path d="M50,300 C50,100 350,100 350,300 " />
</svg>
</section>

目標は、それらのHTMLコードを取得し、それをjavascript自体の中に配置して、HTMLコードのタグでそれを検索しないようにすることです。しかし、私はそれを自分で行うためにそれらのquerySelectorから何を取得しているのかを知ることができません。

どんな助けでも素晴らしいでしょう！

alert（document.getElementById（'code'））;を実行するとき 私はこれを手に入れます：

ここに画像の説明を入力してください

コード文字列：

var code = "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img');
o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+""px"";o.style.top  = point.y+""px"";o.style.transform = o.style.webkitTransform =o.style.MozTransform =""rotate("" + angle + ""deg)"";});"
4

3 に答える 3

3 
document.querySelector('svg')  === document.getElementsByTagName('svg').item(0)
document.querySelector('path') === document.getElementsByTagName('path').item(0)
document.querySelector('#code') === document.getElementById('code')

querySelector最初に一致した要素を返しますnull。見つからなかった場合は返します。

document.querySelector

指定されたセレクターのグループに一致する、ドキュメント内の最初の要素を返します（ドキュメントのノードの深さ優先の事前順序トラバーサルを使用）。

CSSセレクターについてのチュートリアルを受講する必要があります。

于 2012-05-16T20:06:10.870 に答える
1

あなたは正しいことを手に入れています、あなたが#codeのコンテンツが欲しいなら、あなたはする必要があります

alert(document.getElementById('code').innerHTML)

現在行っているのは、というノードを見つけることだけです。code

そのコードをページに表示するには、これを行う必要があります。

var node = document.createElement("script");
node.innerHTML = document.getElementById('code').innerHTML;
document.getElementsByTagName("head").appendChild(node);

これにより、テキストエリアからコードが抽出され、ヘッダーにスクリプトタグが作成され、divからコンテンツが追加されます。その後、ページでコードを使用できるようになり、呼び出すだけで済みます。

または、このコンテンツを外部のjsファイルに入れて、ドキュメントの読み込み時に同様の方法でページに追加することもできます...

var node = document.createElement("script");
node.setAttribute("href","js/curveanimate.js") 
document.getElementsByTagName("head").appendChild(node)
于 2012-05-16T20:24:08.617 に答える
0

そのプロパティを表示するには、最後に「.value」を追加する必要があります

alert(document.getElementById('code').value)

これがあなたのコードの例です。

編集：

これはあなたが探しているものに沿ったものですか？

于 2012-05-16T20:54:11.047 に答える