3

こんにちは私は次のコードを持っています、そして私はボタンを押すことによって円の半径を変更できるようにしたいです私はスタイルの後に何を使うべきかわかりません。document.getElementById（ "circle1"）。style.r = "10"; コードの一部 

<html>
    <head>
    <script>
    function circle() {
        document.getElementById("circle").style.r="50";
}

    function circle1() {
        document.getElementById("circle1").style.r="10";

} 


    </script>


    </head>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" >
     <circle id = "circle" cx = "100" cy = "800" r = "30" stroke="blue" stroke-width = "2" fill = "black"/>
     <circle id = "circle1" cx = "20" cy = "500" r = "30" stroke="blue" stroke-width = "2" fill = "black"/>
    </svg>
    <body>
    Set size of circles
    <input type="button" onclick="circle()" value="big" />
    <input type="button" onclick="circle1()" value="small" />
    </body>
    </html>
4

5 に答える 5

6

pp19ddが指摘しているように、彼の答えでは、キーはですが、要素の属性をsetAttribute()増減したいように思われるので（単に特定の値に設定するのではなく）、同様に使用する必要があります。rcirclegetAttribute()

これはかなり単純な関数と実装であり、私が思うに、あなたが望むことを実行します。

function circle(delta){
    if (!delta){
        return false;
    }
    else {
        var e = document.querySelectorAll('circle[id^=circle]'),
            changeBy = 10;
        if (delta == 'big'){
            e[0].setAttribute('r',parseInt(e[0].getAttribute('r'),10) + changeBy);
            e[1].setAttribute('r',parseInt(e[1].getAttribute('r'),10) + changeBy);
        }
        else if (delta == 'small'){
            e[0].setAttribute('r',parseInt(e[0].getAttribute('r'),10) - changeBy);
            e[1].setAttribute('r',parseInt(e[1].getAttribute('r'),10) - changeBy);
        }
    }
}

var inputs = document.getElementsByTagName('input'),
    buttons = [];

for (var i = 0, len = inputs.length; i < len; i++) {
    if (inputs[i].type == 'button') {
        inputs[i].onclick = function(){
            circle(this.value);
        }
    }
}

<ahref = "http://jsfiddle.net/davidThomas/QkAB5/" rel = "nofollow noreferrer">JSFiddleのデモ。

r円の属性の無効な負の値のチェックを実装していないことに注意してください。自分で追加することをお勧めします。

そして、私document.querySelectorAll()は単純化のために使用しました（への2つの明示的な呼び出しではなくdocument.getElementById()）。これにより、Internet Explorerで問題が発生しますが、Internet ExplorerでSVGがどの程度適切に実装されているかはわかりません。したがって、状況が悪化することはないかもしれません。

とはいえ、IE9はデモを完全に実装しているようです。それは私に終わりがないことを驚かせます..！IE 8以下ですが、私には言えません。

参照：

于 2012-04-16T21:13:50.100 に答える
4

属性を変更するには、setAttribute（）関数を使用します。

function circle() {
    document.getElementById("circle").setAttribute('r', "50" );
}

function circle1() {
    document.getElementById("circle1").setAttribute('r', "50" );
}

たとえば、このjsfiddleを参照してください：http：//jsfiddle.net/dGmxh/2/

于 2012-04-16T20:55:05.790 に答える
0

頭の中の関数定義は同じ名前であり、閉じ括弧がないようです。

于 2012-04-16T20:53:37.580 に答える
0

または、svg.jsライブラリを使用します。これにより、jQueryがJavaScriptをより使いやすくするのと同様の方法で、これらのSVGタスクの多くがより使いやすくなります。とにかく、svg.jsで、半径1の円を作成してから、次のように半径を5に変更します。

var circ = draw.circle(1).attr({ cx: 10, cy: 10, fill: 'none', stroke: 'yellow', 'stroke-width': 2 });
circ.attr({ rx: 5, ry: 5 });

半径の変化を500msでアニメーション化する場合は、次のようにanimate（）メソッドを追加するだけです。

circ.animate(500).attr({ rx: 5, ry: 5 });

onclick（）javascriptメソッドで、コードの2行目（半径を変更する行）を実行するだけです。

于 2013-08-11T11:14:35.150 に答える
-1

onClickを使用する

http://www.w3schools.com/jsref/event_onclick.asp

于 2012-04-16T20:48:22.950 に答える