从javascript更改div元素的属性_Javascript_Html

从javascript更改div元素的属性

javascript html

从javascript更改div元素的属性,javascript,html,Javascript,Html,我有一个“内部”div元素，我想从java脚本中控制它。现在loaded（）函数中的代码没有执行任何操作这里是scc和javascript部分 <style> #outer { width: 30px; height: 80px; border: 2px solid #ccc; overflow: hidden; position: relative; -moz-border-radius: 4px; -

我有一个“内部”div元素，我想从java脚本中控制它。现在loaded（）函数中的代码没有执行任何操作

这里是scc和javascript部分

    <style>
#outer {    

    width: 30px;
    height: 80px;
    border: 2px solid #ccc;
    overflow: hidden;

    position: relative;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

}

#inner, #inner div {
    width: 100%;
    overflow: hidden;
    left: -2px;
    position: absolute;
}

#inner {
    border: 2px solid #999;
    border-top-width: 0;
    background-color: blue;

    bottom: 0;
    height: 30%;
}

#inner div {
    border: 1px blue;
    border-bottom-width: 0;
    background-color: blue;

    top: 0;
    width: 100%;
    height: 2px;
}

</style> 
<script>


  function loaded(){
         document.getElementById("inner").setAttribute("height","100%");

  }      

</script>


#外{
宽度：30px；
高度：80px；
边框：2个实心#ccc；
溢出：隐藏；
位置：相对位置；
-moz边界半径：4px；
-webkit边界半径：4px；
边界半径：4px；
}
#内，内分区{
宽度：100%；
溢出：隐藏；
左：-2px；
位置：绝对位置；
}
#内在的{
边框：2个实心#999；
边框顶部宽度：0；
背景颜色：蓝色；
底部：0；
身高：30%；
}
#内分区{
边框：1px蓝色；
边框底宽：0；
背景颜色：蓝色；
排名：0；
宽度：100%；
高度：2倍；
}
函数加载（）{
document.getElementById（“内部”）.setAttribute（“高度”、“100%”）；
}

这是身体部位

<body onload = "loaded()">
<div id="outer">
              <div id="inner">
                <div></div>
              </div>
            </div>
</body>

现在，我可以在#inner中手动更改百分比，现在是30%。我想这可能是我理解div的运气

你很接近

height

不是

div

元素的属性，而是

style

的属性，

height

是

style

的属性。请尝试以下方法：

function loaded(){
     document.getElementById("inner").style.setAttribute("height","100%");
}

非常感谢。document.getElementById（“内部”）.style.height=“40%”；工作！！！