- ベストアンサー
javascript
javascript全くの初心者です。 CLASSに与えた値を条件によって変更することは出来ますか、色々やってみましたが出来ません。以下の例では男を女に変えたいのですが、ご面倒お掛けしますが宜しくお願い致します。 <html> <head> <title>sample</title> <div class = "test">男</div> </head> <script type="text/javascript"> function delAttr() { test= "女"; } </script> <body> <script type="text/javascript"> if test = "女" delAttr(); </script> </body> </html>
- yotarou
- お礼率44% (59/133)
- JavaScript
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
実行のタイミングがよくわからないのと、HTMLもなんだか妙ですが… とりあえず、ボタンを押すとスクリプトを実行すると仮定すれば、 ＜例1＞ ご質問のように、classがtestのDIVを探して、表示内容を書き換える。 ＜例2＞ 要素にidを振ってよければ、要素の特定が簡単。（change2()で処理） <html> <head> <script type="text/javascript"> function change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="test") div[i].innerHTML = "女"; i++; } } function change2() { document.getElementById("test2").innerHTML = "女"; } </script> </head> <body> ＜例1＞ <div class = "test">男</div> <button type="button" onclick="change()">変更</button> <hr> ＜例2＞ <div class="test2" id="test2">男</div> <button type="button" onclick="change2()">変更</button> </body> </html>
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
これだけですみました。 var replaceTextByClassName = function ( css, text ) { Array.map( document.getElementsByClassName( css ), function (e) { e.textContent = this;}, text ); }; replaceTextByClassName( 'test', 'おかま');
- babu_baboo
- ベストアンサー率51% (268/525)
じかんができたら、べんきょうしようとおもっていますが Firefoxとから、みじかくなります。 var replaceByClassName = (function ( cbFunc, cbFunc2 ) { return function ( css, text ) { Array.map( document.getElementsByClassName( css ), cbFunc ).forEach( cbFunc2, text ); }; })( function (n) { return n; }, function (e) { e.textContent = this; } ); replaceTextByClassName( 'test', 'おかま2');
- babu_baboo
- ベストアンサー率51% (268/525)
くらすは、 class="abc def hijklm" みたいに、ふくすうのしていができます。 ごぞんじかとはおもいますが、しようには、ちゅういを。
- babu_baboo
- ベストアンサー率51% (268/525)
やりたいことは、さいごの２ぎょうなのに、ガチだと たいへん！たしかにらいぶらりーになりそう！^^; ぜんかくくうはくは、かんかくにしてね <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <body> <div class = "test">男</div> <div class = "test2">男</div> <div class = "test">男</div> <div class = "test2">男</div> <script type="text/javascript"><!-- var miniClassList = { 'contains' : (function () { return function ( node, css ) { var str = ' ' + node.className + ' '; if ( -1 < str.indexOf( ' ' + css + ' ' ) ) return true; var i = 0, k, keys = css.split(/ +/); while( k = keys[ i++ ] ) if(-1 == str.indexOf( ' ' + k + ' ' ) ) return false; return true; }; })() }; var getElementsByClassName2 = (function ( checker ) { var all = document.getElementsByTagName( '*' ); return function ( name ) { var cnt = 0, emt; var rst = [ ]; while( emt = all[ cnt++ ] ) if( checker( emt, name ) ) rst.push( emt ); return rst[0] ? rst: null; }; })( miniClassList.contains ); var setTextContent = function ( ary, text ) { var key = /*@cc_on @if(1) 'innerText' @else@*/ 'textContent' /*@end@*/; var cnt = 0, o; if( 1 === ary.nodeType ) ary[ key ] = text; else while( o = ary[ cnt++ ] ) o[ key ] = text; }; //_____________ setTextContent( getElementsByClassName2( 'test' ), '女' ); setTextContent( getElementsByClassName2( 'test2' ), 'おかま' ); //--> </script>
- yambejp
- ベストアンサー率51% (3827/7415)
それっぽくやるには共通化してこんな感じで・・・ （だんだんライブラリっぽくなるんですが） <head> <script> window.onload=function(){ delAttr("test","女"); delAttr("test2","おかま"); } function getElementsByClassName2(cn){ var ar=new Array(); var el=document.getElementsByTagName("*"); for(var i=0;i<el.length;i++){ if(cn==(el[i].getAttribute("className")||el[i].getAttribute("class"))){ ar.push(el[i]); } } return ar; } function delAttr(cn,str){ var ar=getElementsByClassName2(cn); for(var i=0;i<ar.length;i++){ var obj=ar[i]; while(obj.firstChild) obj.removeChild(obj.firstChild); obj.appendChild(document.createTextNode(str)); } } </script> </head> <body> <div class = "test">男</div> <div class = "test2">男</div> <div class = "test">男</div> <div class = "test4">男</div> </body>
お礼
凄い出来ました。本当にありがとうございます。 ボタンを押さなくても条件によって男であったり女であったりすることは 出来ますか、追加質問で申し訳ないのですが 何卒宜しくお願い致します。 尚、全くの素人ですので質問がすっとんきょうなことお許し下さい。