重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

JavaScriptのdiv.style属性の変更が反映されない：最後

解決済

  • 質問者：Tank2005
  • 質問日時：
  • 回答数：3件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

「印刷プレビュー」でしか確認していませんが…


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だけ取り除くという方法のほうが、クラス指定の状態と内容を常に一致した状態に保てるので、よくはないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

pageBreakAfter="auto";にしてみたところIE8でも余分なページが出力されなくなりました。ご回答ありがとうございます。

通報する
お礼日時：2010/06/19 11:59

No.3

  • 回答者： think49
  • 回答日時：

> 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? …
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

break;


のまえに、
alert(i);
をいれてみると

この回答への補足

質問のコードの場合は「２」と表示されます

補足日時：2010/06/18 21:44
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報