JavaScriptのdiv.style属性の変更が反映されない：最後
- JavaScriptでdiv要素のstyle属性を変更しても反映されない問題について解決方法を知りたいです。
- JavaScriptを使用してdiv要素のstyle属性を変更しようとしていますが、最後のDivタグ以外のすべてのDivタグに改ページ属性を有効にする方法がわかりません。
- 現在のプログラムでは、スタイル属性が更新されずに改ページが実行されてしまい、印刷時に真っ白なページが追加されてしまいます。正しく動作させるためにはどのような方法がありますか？
- ベストアンサー
JavaScriptのdiv.style属性の変更が反映されない：最後
JavaScriptのdiv.style属性の変更が反映されない：最後のDivタグを除いたすべてのDivタグに改ページ属性を有効にするようJavaScriptで制御したいと考えています。しかし、以下のようなプログラムでは、スタイル属性が更新されず改ページが実行されてしまうため、１枚真っ白な紙が印刷されることになってしまいます。こちらの意図したように動作させるにはどうしたらよいでしょうか。 <html> <head> <style> div.test { page-break-after:always; color:black; } </style> <script type="text/javascript"> window.onload = function() { var divs = document.getElementsByTagName('div'); for(i = divs.length - 1; i >= 0; i--){ if(divs[i].className == "test"){ divs[i].style.pageBreakAfter = ""; break; } } }; </script> </head> <body> <div class="test">テスト</div> <div class="test">テスト</div> <div class="test">テスト</div> </body> </html>
- Tank2005
- お礼率36% (52/143)
- JavaScript
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「印刷プレビュー」でしか確認していませんが… Fx（3.5）では、スクリプトを実行しなくても、最後の白紙は出力されません。 （pageBreakなんて、使ったこと無かったので思わず調べちゃいました） ＞divs[i].style.pageBreakAfter = ""; だと、どうもCSSの指定が残ってしまうようなので、明示的に"auto"か"avoid"を指定することで、最後の白紙が出なくなるようです。 （理由はよくわかりません） ただし、IE(6)ではavoidには対応していないようで、指定するとエラーがでてしまいます。 なので、"auto"指定にしておくのがよさそう。 もっとも、ご提示のサンプルのような場合であれば、page-breakを指定するクラスだけ別に作っておいて div.pagebreak { page-break-after:always; } HTMLは、 <div class="test pagebreak">テスト</div> のようにしておいて、 classNameからpagebreakだけ取り除くという方法のほうが、クラス指定の状態と内容を常に一致した状態に保てるので、よくはないでしょうか？
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
> divs[i].style.pageBreakAfter = ""; 「element.style.property = ''; でスタイルを初期値に戻す事ができる」という規定はどこにもないので実装を変えた方がいいような気がします。 例えば、element.className = ''; あるいは、document.styleSheets を書き換える方法など。 onclickを使わずにイベント処理をする方法について。(1/2) | OKWave http://okwave.jp/qa/q5931597.html 掲示板/スタイルシート質問板/テキストボックスのスタイル初期化 - TAG index Webサイト http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1373
関連するQ&A
- JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- 締切済み
- JavaScript
- javascriptでのclass属性変更について教えて下さい。
javascriptでのclass属性変更について教えて下さい。 html上でclass=tripleがあるとして、javascriptでたとえば、color="red"を適応するにはどうすればいいのでしょうか？お解りになるかた、教えてください。 <div class="triple"><p>あ</p></div>
- ベストアンサー
- JavaScript
- javascirpt 超初心者です・・・すみません。。
本当に初心者なんでゆるしてください。。 下記のプログラムで、マウスオーバー・アウトでスクリプトを読み込んでスタイルシートを入れ替えようとおもっていました。 ですが、機能してくれません。。 すみませんが、ご教授いただけませんでしょうか？ お願いします。。 --html---------------------------------------------------- <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> ----------------------------------------------------------- ---css---------------------------------------------------- .hare{ background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ background:url(toumei2.gif) no-repeat; width:300px; height:100px;} ----------------------------------------------------------- ---javascript----------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<=hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } -----------------------------------------------------------
- 締切済み
- Java
- JavascriptでInputClassの表示を変えるには
以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。
- ベストアンサー
- Java
- スタイルシートが反映されないのははなぜ？
○質問の主旨 下記のjQueryのコードにたいしてCSSを当てているつもりですが スタイルが反映されません。なぜでしょうか？ 詳しい方がいらっしゃいましたら、ご教示願います。 ○質問の補足 jQuery、CSSともにドットインストールで使われているコードを、 ほとんどコピーして使っています。 にも関わらず動画では、スタイルシートが反映されて、 自分で作ったスタイルシートの方では、反映されないことについて よく理解できません。 ドットインストール jQueryで作るスライドショー～#02 縮小画像を表示してみよう http://dotinstall.com/lessons/slideshow_jquery/25402 なお、動画で紹介されているコードと私が作成したコードでは、 以下の2点が異なります。 1.アップロードする画像ファイル名が異なる 2.スタイルは<head>タグの中にスタイルタグをあてるのではなく、 外部のCSSファイルから読み込む ○自分で作ったコード (index.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでスライドショー</title> </head> <body> <div id="thumbnails"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var files = [ 'test1.jpg', 'test2.jpg', 'test3.jpg', 'test4.jpg', ]; var img; for(var i = 0; i < files.length; i++) { img = $('<img>').attr('src', files[i]); $('#thumbnails').append(img); } }); </script> </body> </html> (my.css) body { margin: 10px auto; text-align: center; } .thumbnail { width: 125px; height: 83px; } .thumbnail + .thumbnail { margin-left: 10px; } ○ドットインストールのコード (index.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでスライドショー</title> <style> .thumbnail { width: 125px; height: 83px; } </style> </head> <body> <div id="thumbnails"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var files = [ 'food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg' ]; var img; for (var i = 0; i < files.length; i++) { img = $('<img>').attr('src', files[i]).addClass('thumbnail'); $('#thumbnails').append(img); } }); </script> </body> </html>
- ベストアンサー
- CSS
- <div>内でjavascript
つまづいてしまったので教えてください。 文章系のサイトなので、javascriptで文字サイズを読んでくれる方が好きな大きさに変えれるように作ってあります。現状は<head>内に、 <script type="text/javascript"> <!-- function fontsize() { document.all.cc.style.fontSize = ff.ss.options[ff.ss.selectedIndex].text; } // --> </script> フォントサイズを変更するプルダウンメニュー。 サイズ変更させたい文章を<font>で囲ってかこむ（<td><font id="cc">○○</font></td>。 で、ここからが質問なのですが、これはページ全体を<div>で囲ってしまうと使えなくなってしまうのでしょうか？ ページデザインを変えたくて、今までのテーブル(ページ全体）を<div>で囲ってしまったら、プルダウンメニューで文字サイズを変更しようとすると画面が真っ白になってしまいました。 <div>内容は、 <div style="width:100%;height:100%;overflow:auto;border:1px dotted #ff8c00;"> です。 どうも上手く説明できなかったのですが、<div>で囲ってしまうと文字サイズは変更できなくなってしまうのでしょうか？ 分かる方いらっしゃいますか？
- 締切済み
- HTML
- ボタンを押せば、画面が切り替わる方法が知りたい
このプログラムをラジオボタンで画面が切り替わる方法ではなく、普通のsubmitボタンで切り替えれる方法にしたいです。 最初は、<input type="radio"をinput type="submit"にしたのですが、これでは、たぶん変わってるんだとは思うんですけど一瞬しか画面が変わりません。 これを、次のボタンを押すまで、ずーと同じ画面になる方法が知りたいです。 <html> <head> <style type="text/css"> #contents2,#contents3,#contents4{ display:none; } </style> <script language=javascript> function view(divId,divClass){ var divs=document.getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ if(divs[i].className==divClass){ if(divs[i].id==divId) divs[i].style.display="block"; else divs[i].style.display="none"; } } } </script> </head> <body> <form> <input type="radio" name="category" id="category1" onClick="view('contents1','contensGroup')" checked><label for="category1">エリア１</label> <input type="radio" name="category" id="category2" onClick="view('contents2','contensGroup')"><label for="category2">エリア２</label> <input type="radio" name="category" id="category3" onClick="view('contents3','contensGroup')"><label for="category3">エリア３</label> <input type="radio" name="category" id="category4" onClick="view('contents4','contensGroup')"><label for="category4">エリア４</label> </form> <div id="contents1" class="contensGroup">内容１</div> <div id="contents2" class="contensGroup">内容２</div> <div id="contents3" class="contensGroup">内容３</div> <div id="contents4" class="contensGroup">内容４</div> </body> </html>
- ベストアンサー
- JavaScript
- 初心者で申し訳ないのですが・・・お願いします。
現在、javascriptの勉強中なのですが、どうしてもわからなくなってしまい今回投稿させてもらいました・・・ 今回の質問の内容なのですが、 div要素のスタイルシートのクラス名の切り替えをjavascriptで行おうとおもっていたのですが、全然反応してくれないんです・・ ちなみにHTMLは以下の通りです。 ---------html------------------ <script type="text/javascript" src="test.js"></script> <body> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> --------------------------- cssは ---------css------------------ css .hare{ display:block; background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ display:block; background:url(toumei2.gif) no-repeat; width:300px; height:100px;} です。 --------------------------- スクリプトは以下のとおりです。 ---------javascript(test.js)------------------ window.onload = function(){ var hai = document.getElementsByTagName("div"); for (var i=0; i<hai.length-1; i++){ hai.item(i).onmouseover = function(){ hai.item(i).className="ame"; } hai.item(i).onmouseout = function(){ hai.item(i).className="hare"; } } } --------------------------- 選択したdiv要素にmouseoverしたらクラス名を変えて、 mouseoutしたらクラス名をもどす・・と、いたって単純なプログラムではあるんですが・・動いてくれません・・ （単純なプログラムも組めてないようじゃダメですよね・・） う～～ん・・なぜでしょう・・ ご教授お願いいたします・・・
- ベストアンサー
- JavaScript
- htmlファイルでするとできるのにcgiファイルでするとできないのはなぜでしょう？
お世話になります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"><!-- window.onload=function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj = document.getElementsByClassName("trans_e"); for(i=0;i<obj.length;i++) { l = obj[i].innerHTML; obj[i].style.width = l + "px"; } } //--></script> <style type="text/css"><!-- .trans_a { float:left; width:20px; } .trans_b { float:left; width:100px; } .trans_c { margin-top:10px; } .trans_d { float:left; width:200px; } .trans_e { background-color:red; margin-bottom:2px; } --></style> </head> <body> <div> <div class="trans_a"> </div> <div class="trans_b"><img src="./img/non.png" alt="$shuzoku"> <div class="trans_c">$type</div></div> <div class="trans_d"> <div class="trans_e">41</div> <div class="trans_e">40</div> <div class="trans_e">47</div> <div class="trans_e">35</div> <div class="trans_e">22</div> <div class="trans_e">11</div> </div> </div> </body> </html> このようにclass="trans_e"のところをその中に書かれている数値で幅を可変させようとしているのですがhtmlファイルで試すと思ったようなことをしてくれるのですがcgiファイルに組み込むと幅が100％のまま変わらないのですが解決策をご存知の方いらっしゃいますでしょうか？ getElementByIdですればできるのですが結構数があるものですので・・・－－；
- ベストアンサー
- JavaScript
- 同時に複数重複する項目だけを絞り込ませたいです。
３つの項目を絞り込む機能を実現したいです。 実現させたいことは、 チェックを１つ付けると、その項目だけしかないものを絞り込み、 チェックを２つ付けた場合は、その項目が両方あるものだけを絞りこみたいです。 現在は項目は３種類だけですが種類が増えても更新に負担がかからないようにしたい 試しましたが、チェックが２つ以上になると重複させて機能させることができませんでした。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <script type="text/javascript"> function fff() { var elm = document.getElementById('test1'); var tag = document.getElementsByTagName('input'); var svalue1 = new Array(); var svalue2 = new Array(); var svalue3 = new Array(); var ccc; for(i=0, elmL=elm.children.length; i<elmL; i++){ var spanTAG = elm.children[i].getElementsByTagName('span'); svalue1[i] = new Array(); svalue2[i] = new Array(); svalue3[i] = new Array(); for(m=0, spanL=spanTAG.length; m<spanL; m++){ if(spanTAG[m].className == "span1"){ svalue1[i][m] = spanTAG[m].innerHTML; }else if(spanTAG[m].className == "span2"){ svalue2[i][m] = spanTAG[m].innerHTML; }else if(spanTAG[m].className == "span3"){ svalue3[i][m] = spanTAG[m].innerHTML; } if(tag[0].checked && !tag[1].checked && !tag[2].checked){num=1;}else if(tag[1].checked && !tag[0].checked && !tag[2].checked){num=2;}else if(tag[2].checked && !tag[0].checked && !tag[1].checked){num=3;}else if(tag[0].checked && tag[1].checked && !tag[2].checked){num=4;}else if(tag[0].checked && tag[2].checked && !tag[1].checked){num=5;}else if(tag[1].checked && tag[2].checked && !tag[0].checked){num=6;}else if(tag[0].checked && tag[1].checked && tag[2].checked){num=7;}else{num=8;} switch(num){ case 1: if(new RegExp(tag[0].value).test(svalue1[i][m]) && !new RegExp(tag[1].value).test(svalue2[i][m]) && !new RegExp(tag[2].value).test(svalue3[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 2: if(new RegExp(tag[1].value).test(svalue2[i][m]) && new RegExp(tag[2].value).test(svalue3[i][m]) && !new RegExp(tag[0].value).test(svalue1[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 3: if(new RegExp(tag[2].value).test(svalue3[i][m]) && !new RegExp(tag[1].value).test(svalue2[i][m]) && !new RegExp(tag[0].value).test(svalue1[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 4: if(new RegExp(tag[0].value).test(svalue1[i][m]) && new RegExp(tag[1].value).test(svalue2[i][m]) && !new RegExp(tag[2].value).test(svalue3[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 5: if(new RegExp(tag[0].value).test(svalue1[i][m]) && new RegExp(tag[2].value).test(svalue3[i][m]) && !new RegExp(tag[1].value).test(svalue2[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 6: if(new RegExp(tag[1].value).test(svalue2[i][m]) && new RegExp(tag[2].value).test(svalue3[i][m]) && !new RegExp(tag[0].value).test(svalue1[i][m])){ elm.children[i].style.display = 'block'; }else{ elm.children[i].style.display = 'none'; } break; case 7: case 8: elm.children[i].style.display = 'block'; break; } } } } </script> </head> <body> <form action="#"> <ul> <li><input type="checkbox" name="c1" id="c1" value="aaa" onclick="fff()" /><label for="c1">aaa</label></li> <li><input type="checkbox" name="c2" id="c2" value="bbb" onclick="fff()" /><label for="c2">bbb</label></li> <li><input type="checkbox" name="c3" id="c3" value="ccc" onclick="fff()" /><label for="c3">ccc</label></li> </ul> </form> <div id="test1"> <div class="test2"> <span class="span3">ccc</span> <span class="span2">bbb</span> <span class="span1">aaa</span> </div> <div class="test2"> <span class="span3">ccc</span> <span class="span1">aaa</span> </div> <div class="test2"> <span class="span2">bbb</span> <span class="span1">aaa</span> </div> <div class="test2"> <span class="span3">ccc</span> </div> </body
- ベストアンサー
- JavaScript
お礼
pageBreakAfter="auto";にしてみたところIE8でも余分なページが出力されなくなりました。ご回答ありがとうございます。