2013-02-19 79 views
0

我有一個div其寬度和高度變化幅度應該是相同的:的Javascript,通過高度

所以使用Javascript
<div class="radior" id="ha" style="background-color: #006;" onClick='foo()'></div> 

我先檢查高度,然後想改變的<div>

寬度
function foo(){ 
    var innerHeight = document.getElementById('ha').offsetHeight; 
    var ele = document.getElementsByClassName("radior"); 

    for (var i = 0, len = ele.length; i < len; i++){ 
     ele[i].style.width = innerHeight; 
    } 
} 

但不知何故,它不會工作!我沒有明白!來自德國和這裏 問候是小提琴的例子:

http://jsfiddle.net/TSk6y/1/

回答

4

你爲什麼不保留它很簡單嗎?你不需要for循環。只需直接對元素進行尋址,並在您的寬度聲明中附加+"px"

<div class="radior" id="ha" style="background-color: #006;" onClick='foo(this)'></div> 

function foo(that){ 
    var innerHeight = that.offsetHeight; 
    that.style.width = innerHeight+"px"; 
} 

甚至更​​短:

function foo(that){ 
    that.style.width = that.offsetHeight+"px"; 
} 
+0

有幾個同類的div!坦克! – 2013-02-19 13:44:13

+0

看我怎麼做得更簡單:D – 2013-02-19 13:44:21

+0

@EmSta啊,好的。儘管如此,你可以直接交出元素,不需要'getElementById'。 – Christoph 2013-02-19 13:45:55

3

只是這樣做

ele[i].style.width = innerHeight + "px"; 
1

這似乎爲我工作 - 不知道爲什麼的jsfiddle沒有,但如果我把所有的代碼到一個.html文件,並運行在標準瀏覽器(在這裏使用chrome),它的工作原理。我點擊該分區,並且它確實改變了寬度:

<html> 
<head> 
<style> 
body,html {width:100%; 
    height:100%; 
} 

.radior{ 
    width: 20%; 
    height: 60%; 
} 
</style> 
</head> 
<body> 
<div class="radior" id="ha" style="background-color: #006;" onClick="foo()"></div> 
</body> 
<script type="text/javascript"> 
function foo(){ 
    var innerHeight = document.getElementById('ha').offsetHeight; 
    var ele = document.getElementsByClassName("radior"); 

    for (var i = 0, len = ele.length; i < len; i++){ 
    ele[i].style.width = innerHeight; 
    } 
} 
</script> 
</html>