js通过id修改子元素的长宽

[zzzrrr1989]

如上图所示，知道id为aboutDiv，现在希望通过js调整 第一个子元素 的长宽，即修改iframe标签的height与width，将height设为270px，将width设为100%。

实际上第一个子元素不一定是iframe标签，这里只是举个例子~~

[cocotsau]

支持IE9+,FF,Chrome

<div id="aboutDiv">
	<div>1-1-1</div>
	<div>2-2-2</div>
	<div>3-3-3</div>
	<div>4-4-4</div>
	<div>5-5-5</div>
</div>
<script type="text/javascript">
onload = function(){
	var aboutDiv = document.getElementById('aboutDiv'),
		firstChild = aboutDiv.firstElementChild;//返回第一个元素子节点
	firstChild.style.width = '100%';
	firstChild.style.height = '270px';
}
</script>

[Go 旅城通票]

var ifr=document.getElementById('aboutDiv').getElementsByTagName('iframe');
ifr.style.height='270px'
ifr.style.width='100%'

[zpjshiwo77]

$("#aboutDiv").children().first().css({height:270,width:100%});

[zzzrrr1989]

引用 2 楼 showbo 的回复:

var ifr=document.getElementById('aboutDiv').getElementsByTagName('iframe');
ifr.style.height='270px'
ifr.style.width='100%'

--------------------------------------------- 如果第一个子元素的标签名不是iframe呢？

[zzzrrr1989]

引用 1 楼 zpjshiwo77 的回复:

$("#aboutDiv").children().first().css({height:270,width:100%});

------------------------------------------------------------------- 谢谢！

[Go 旅城通票]

<div id="aboutDiv">
    aaa
    <div></div>
</div>
<script>
    var node = document.getElementById('aboutDiv').childNodes[0];
    while (!node.tagName) node = node.nextSibling;//找到第一个非内容节点
    node.style.height = '270px'
    node.style.width = '100%'
</script>

[zzzrrr1989]

1楼亲测可用，4、6楼未测试~~结贴