0

嗨，有人可以帮助我获得调整形状大小的按钮。我自己尝试过，但无法让它发挥作用。下面是我到目前为止的代码提前谢谢

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

3 回答 3

1

您可以使用属性访问 DOM 元素的 CSSstyle属性，如下所示：

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" />
于 2012-04-13T12:29:21.030 回答
1 
<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>

请查看按钮的单击属性。并且你的 svg 元素没有 id。:-)

于 2012-04-13T12:31:47.880 回答
-2

使用 jQuery 来避免这种 DOM 可恶 document.getElementById("fooo")

于 2012-04-13T12:51:57.307 回答