Question

嗨，有人可以帮助我按下按钮来调整形状。我自己有一个去，但无法让它工作。以下是我到目前为止感谢的代码

<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>

Answer 1

您可以使用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";
}

关于编码约定的一些注意事项：您通常希望在与函数名称相同的行上打开功能括号。函数名称应始终为camelCase;仅保存UpperCase类名称。最后，确保你在函数，if语句等内容中选项卡。你的开发人员会感谢你。 =）

编辑：确保您的HTML看起来像这样：

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

Answer 2

<html> 
<head>
<script>

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

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



 </script>
</head>
<body>

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


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

</body>
</html>

请查看按钮的onclick属性。而且你的svg元素没有id。： - ）

Answer 3

使用jQuery来避免这个DOM憎恶的文档.getElementById（“fooo”）

用于调整形状大小的输入按钮

3 个答案: