Question

我是HTML，CSS和Javascript的新手。我试图制作一个小圆圈，在每次>点击时，向右移动10px 。我尝试编写这个简短的代码：

＆＃13;
＆＃13;
function moveit() { document.getElementById("circle").style.cx += "10px"; };
＆＃13;
<svg width="500px"> <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" /> </svg>
＆＃13;
＆＃13;
＆＃13;

通过编写上面的代码，我每次点击圆圈时都会尝试将10px添加到 cx 。但似乎无法将10px添加到 cx 。我需要知道如何以正确的方式做到这一点。谢谢！

Answer 1

首先，cx是HTML元素的attribute。因此，请使用getAttribute()和setAttribute()来相应地检索和分配属性值。在您的情况下，要检索值：

var cx = document.getElementById("circle").getAttribute("cx");

另外，我添加了一些正则表达式，用于从cx属性中删除非数字字符，并在将其递增10之前将其转换为int：

cx = parseInt(cx.replace(/\D/g,'')) + 10;

最后，将新属性值分配给元素：

document.getElementById("circle").setAttribute("cx", cx);

全部放在一起：

<script>
    function moveit() {
        var circle = document.getElementById("circle");
        var cx = circle.getAttribute("cx");
        cx = parseInt(cx.replace(/\D/g,'')) + 10;
        circle.setAttribute("cx", cx);
    };
</script>
<body>
    <svg width="500px">
        <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()"/>
    </svg>
</body>

Working JS Fiddle

Answer 2

您可以使用SVG DOM执行此操作，这样您就可以避免所有get / set属性，并根据需要使用+ =。还可以避免所有关于删除单位和转换为字符串或从字符串转换的复杂性。

＆＃13;

function moveit() {
  document.getElementById("circle").cx.baseVal.value += 10;
};

＆＃13;

<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit()" />
</svg>

＆＃13;

Answer 3

您需要setAttribute，例如：

x = 10;
moveit = function() {
    x = x + 10
    document.getElementById("circle").setAttribute("cx", x);
};

http://jsfiddle.net/ejtef6fx/

getAttribute的示例：

moveit = function() {
    var svg = document.getElementById("circle")
    var x = parseInt(svg.getAttribute("cx"))
    x = x + 10
    svg.setAttribute("cx", x)
};

http://jsfiddle.net/ejtef6fx/1/

使用parseInt或parseFloat确保在向其添加10之前返回的值是一个数字。

Answer 4

这样的东西？

function moveit() {
    var cx = document.getElementById("circle").getAttribute("cx");
    cx = cx.replace('px', ''); // remove px
    cx = parseInt(cx); // convert to int
    cx += 10; // add 10
    cx = cx.toString() + 'px'; // append px
    document.getElementById("circle").setAttribute("cx", cx);
};

演示here。

Answer 5

您正在编辑属性，而不是CSS样式。

您想使用getAttribute获取当前值，然后使用setAttribute重新设置它。

function moveit() {
  var objCircle = document.getElementById("circle");
  var intCX = parseInt(objCircle.getAttribute('cx'));
  objCircle.setAttribute('cx', intCX + 10 + 'px');
};

<svg width="500px">
  <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit(this)" />
</svg>

修改

如果您正在针对多个元素运行此函数，那么最好通过将类分配给可移动元素然后使用侦听器来完成。 Robert Longson使用SVG DOM的想法远远优于使用setAttribute，因此我也将其包括在内。

function MoveRight(objSVG, intVal) {
  objSVG.cx.baseVal.value += intVal;
};

var objMovers = document.querySelectorAll('.moveme'); // Get a list of the nodes with the moveme class
Array.prototype.forEach.call(objMovers, function(element, index) { // Loop through each of these element nodes
  element.addEventListener('click', function() { // Apply a click listener
    MoveRight(this, 10); // Run the MoveRight function and push this element and the amount through.
  });
});

<svg width="500px">
  <circle class="moveme" id="circle" cx="10px" cy="10px" r="5px" />
</svg>

Answer 6

cx是一个属性，而不是CSS属性。这是如何在点击时增加它：

function moveit() {
    //get current cx value
  var cx = document.getElementById("circle").getAttribute('cx');

    //remove the 'px' part
  var cxVal = Number(cx.substring(0, cx.length - 2));

    //increment cx value by 10
    cxVal+=10;

    //set value again
  document.getElementById("circle").setAttribute('cx', cxVal+'px');
};

工作小提琴：https://jsfiddle.net/qmchLqtq/

Answer 7

希望这可以帮到你:)

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            window.moveit = function(elementID) {
                var currentElement = document.getElementById(elementID);
                    currentElement.setAttribute('cx', parseInt(currentElement.getAttribute('cx'), 10) + 10 + 'px');
            };
        </script>
    </head>
    <body>
        <svg width="500px">
             <circle id="circle" cx="10px" cy="10px" r="5px" onclick="moveit(this.id)"/>
        </svg>
    </body>
</html>

如何使用javascript移动此圈子？

7 个答案:

修改