輸入按鈕來調整形狀

嗨，有人可以幫助我獲得按鈕來調整形狀。我已經自己去了，但無法讓它工作。下面是我的代碼必須事先到目前爲止感謝輸入按鈕來調整形狀

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

來源

2012-04-13 Len

你嘗試我所提供的代碼。有用！ – 2012-04-13 12:59:01

<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-13 12:31:47

感謝您的幫助，有沒有一種方法可以在形狀調整大小時不使按鈕移動，或者我必須使用按鈕的x和y座標來防止這種情況發生？ – Len 2012-04-13 13:05:45

@Len我更改的代碼如何？只需將矩形包裹在一個div中並給它一個最小高度。希望有所幫助！ – 2012-04-13 13:13:58

是的代碼作品感謝您的幫助:) – Len 2012-04-13 13:40:25

您可以用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" />

來源

2012-04-13 12:29:21

我嘗試過和沒有風格屬性，它仍然沒有工作 – Len 2012-04-13 12:50:18

@Len：看到我編輯的答案。 – 2012-04-13 13:13:46

-2

使用jQuery來避免這種DOM可憎的document.getElementById（「fooo」）

來源

2012-04-13 12:51:57

輸入按鈕來調整形狀

回答

相關問題