Javascript多样式集

Question

<div id="newsinsite" >gasdgasdgf</div>
<div id="newsinsite" >hasdgfasd</div>
<div id="newsinsite" >gasdgasd</div>
<div id="newsinsite" >gasdgasd</div>


<script>
    document.getElementById('style').style.width = "430px";
</script>

Javascript是通过newsinsite为所有div设置样式的。 请帮我 ：）

Answer 1

做这个：

<div id="newsinsite1" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite2" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite3" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite4" class="newsinsite">gasdgasdgf</div>


<script>
    var elem = document.getElementsByClassName("newsinsite");
    for (var i=0;i<elem.length;i++) {
        elem[i].style.width = "430px";
    }
</script>

但是，如果这是静态设置，请使用CSS代替：

<style>
    .newsinsite {
        width: "430px";
    }
</style>

UPDATE

为了支持IE8，请使用querySelectorAll('.classname')代替getElementsByClassName

Answer 2

<div class="newsinsite">gasdgasdgf</div>
<div class="newsinsite">hasdgfasd</div>
<div class="newsinsite">gasdgasd</div>
<div class="newsinsite">gasdgasd</div>


<script>
    var i = 0, els = document.getElementsByClassName('newsinsite'), len = els.length;

    for(;i<len;i++) {
        els[i].style.width = '430px';
    }
</script>

或者，使用CSS进行设置：

.newsinsite { 
    width: 430px;
}