Question

我有一个宽度和高度应该相同的div：

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

因此，使用Javascript我首先检查高度，然后想要更改<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/

Answer 1

为什么不保持简单？你不需要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";
}

Answer 2

就这样做

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

Answer 3

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

小提琴链接：http://jsfiddle.net/opherv/57V5b/

Answer 4

这似乎对我有用 - 不确定为什么jsFiddle没有，但如果我将所有代码放入.html文件，并在标准浏览器中运行（在这里使用chrome），它就可以工作。我点击div，它确实改变了宽度：

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

Javascript，按高度更改宽度

4 个答案: