javascriptで特定のオブジェクトのCSSの書換え

質問

javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。
例えば、

<div class="aaa" style="z-index:0;">aaa</div>
<div class="aaa" style="z-index:1;">bbb</div>
<div class="aaa" style="z-index:2;">ccc</div>
<div class="aaa" style="z-index:3;">ddd</div>
<div class="bbb">111</div>
<div class="bbb">222</div>
<div class="bbb">333</div>

このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。
（prototype.jsを使うので、getElementsByClassNameは使えます。）
詳しい方、ご教授いただければ幸いです。

回答No.1

OKbokuzyo · ベストアンサー

私はjquery派なんだががが‥

z-indexなら.style.zIndexで取得、設定ができますよ。

具体的に言うと
(prototype.jsはあんまり使ったことないので
getElementsByClassNameの使い方は推測で記載します。）

var nodelist = getElementsByClassName("aaa");
for (var i = 0, intLen = nodelist.length; i < intLen; i++){
if (nodelist[i].style.zIndex >= 1){
nodelist[i].style.zIndex -= 1
}
}

未検証なので間違いがあったらテキトーに直してくださいな。

回答No.3

babu_baboo

<div class="aaa" style="z-index:0;">aaa</div>
<div class="aaa" style="z-index:1;">bbb</div>
<div class="aaa" style="z-index:2;">ccc</div>
<div class="bbb">111</div>

<script type="text/javascript">

function hoge( n, c ) {
var es = document.getElementsByTagName( n ), i = 0, e;
var r = new RegExp( '(^|\\s)' + c + '(\\s|$)' );
while( e = es[ i++ ] )
if( r.test( e.className ) && e.style.zIndex > 0 ) --e.style.zIndex;
}
hoge('div', 'aaa');

var o,objs=document.getElementsByTagName('div'),c=0;
while(o=objs[c++]) alert(o.style.zIndex);

</script>
だめかなぁ～

回答No.2

yyr446

prototype.jsを使って
window.onload = function () {
var aaa_elements=document.getElementsByClassName("aaa");
aaa_elements = $A(aaa_elements);
aaa_elements.each(function(element){
if(element.style.zIndex >=1 ){
element.style.zIndex=element.style.zIndex-1;
}
});
}
となります。
注意点）
　prototype.jsのgetElementsByClassNameとFirefox3.0以上で
標準サポートされるgetElementsByClassNameがかぶってしまい
返されるオブジェクトが異なるので、aaa_elements = $A(aaa_elements);
として、prototype.jsの配列オブジェクトに入れなおしています。

　それから、この方法ではstyle属性でz-indexをセットしているものしか
拾えません。