Javascript 输入按钮以调整形状大小_Javascript_Dom_Svg

Javascript 输入按钮以调整形状大小

javascript dom svg

Javascript 输入按钮以调整形状大小,javascript,dom,svg,Javascript,Dom,Svg,嗨，有人能帮我调整形状的按钮吗。我自己也试过，但没能成功。以下是我到目前为止的代码，请提前感谢 <html> <head> <script> function Smaller() { document.getElementById("rectangle1").height="50"; document.getElementById("rectangle1").width="50"; } function resetsize() { document

嗨，有人能帮我调整形状的按钮吗。我自己也试过，但没能成功。以下是我到目前为止的代码，请提前感谢

<html> 
<head>
<script>


function Smaller()
{
document.getElementById("rectangle1").height="50";
document.getElementById("rectangle1").width="50";
}



function resetsize()
{
document.getElementById("rectangle1").height="200";
document.getElementById("rectangle1").width="300";
}



 </script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px">
  <rect id="rectangle1" x="150" y="0"  width="300" height="200"   />
</svg>


    <input type="button" onclick="Smaller" value="Smaller" />
    <input type="button" onclick="resetsize" value="ResetSize" />

</body>
</html>


函数较小（）
{
document.getElementById（“矩形1”）.height=“50”；
document.getElementById（“矩形1”）.width=“50”；
}
函数resetsize（）
{
document.getElementById（“矩形1”）.height=“200”；
document.getElementById（“矩形1”）.width=“300”；
}

您可以使用

style

属性访问DOM元素的CSS属性，如下所示：

function smaller() {
    document.getElementById("rectangle1").style.height="50";
    document.getElementById("rectangle1").style.width="50";
}

function resetsize() {
    document.getElementById("rectangle1").style.height="200";
    document.getElementById("rectangle1").style.width="300";
}

<input type="button" onclick="smaller()" value="Smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />

关于编码约定的一些注意事项：您通常希望在函数名的同一行上有一个打开的函数括号。函数名称应始终为

camelCase

；仅为类名保存

大写

。最后，请确保您在函数、if语句等内容中添加了标签。您的开发伙伴将感谢您。=）

编辑：确保您的HTML如下所示：

function smaller() {
    document.getElementById("rectangle1").style.height="50";
    document.getElementById("rectangle1").style.width="50";
}

function resetsize() {
    document.getElementById("rectangle1").style.height="200";
    document.getElementById("rectangle1").style.width="300";
}

<input type="button" onclick="smaller()" value="Smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />


函数较小（）{
document.getElementById（“矩形1”）.style.height=“50px”；
document.getElementById（“矩形1”）.style.width=“50px”；
}
函数resetsize（）{
document.getElementById（“矩形1”）.style.height=“200px”；
document.getElementById（“矩形1”）.style.width=“300px”；
}

请看按钮的点击特性。并且您的svg元素没有id:-）

使用jQuery来避免这个讨厌DOM的文档。getElementById（“fooo”）

我已经尝试了使用和不使用style属性，但是它仍然不起作用。请尝试我提供的代码。它起作用了！感谢您的帮助，有没有办法在调整形状时不移动按钮，或者我必须使用按钮的x和y坐标来防止这种情况发生？@Len我更改的代码如何？只需将矩形包装在一个div中，并给它一个最小高度。希望有帮助！