JavaScriptのdiv.style属性の変更が反映されない:最後のDivタグを除いたすべてのDivタグに改ページ属性を有効にするようJavaScriptで制御したいと考えています。しかし、以下のようなプログラムでは、スタイル属性が更新されず改ページが実行されてしまうため、1枚真っ白な紙が印刷されることになってしまいます。こちらの意図したように動作させるにはどうしたらよいでしょうか。
<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>
No.2ベストアンサー
- 回答日時:
「印刷プレビュー」でしか確認していませんが…
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だけ取り除くという方法のほうが、クラス指定の状態と内容を常に一致した状態に保てるので、よくはないでしょうか?
pageBreakAfter="auto";にしてみたところIE8でも余分なページが出力されなくなりました。ご回答ありがとうございます。
No.3
- 回答日時:
> 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? …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavascriptでXSSの脆弱性への対...
-
CSSでreadonlyの機能はあり...
-
ホームページ上の文字の色を変...
-
改行をしたいが、<br>と...
-
Q&A掲示板の入力フォームに文字...
-
確認ダイアログを次からは表示...
-
フォームで「パスワード(確認...
-
javascriptで複数の表示・非表...
-
もしかして
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
CloseとDisposeの違い
-
VBAでループ内で使う変数名を可...
-
エクセルVBAで、MsgBox やInput...
-
Do~Loopした回数をカウントしたい
-
switch の範囲指定
-
VBAでセルに値が入力されるまで...
-
メルカリのメルカードで買い物...
-
ImageMagickでgif画像の一部が...
-
【Excel】特定の文字を含むセル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Q&A掲示板の入力フォームに文字...
-
JavascriptでDom XSSの脆弱性対...
-
【JavaScript】検索がヒットし...
-
CSSでreadonlyの機能はあり...
-
JavascriptでXSSの脆弱性への対...
-
formのsubmitを押すとモーダル...
-
確認ダイアログを次からは表示...
-
JavascriptのHTMLクラス表示に...
-
特定の条件のHTML要素を一括で...
-
jQueryでのドラッグアンドドロ...
-
javascriptで複数の表示・非表...
-
jqueryを使ったスムーススクロ...
-
jqueryアコーディオンの上部の...
-
JavaScriptのdiv.style属性の変...
-
2回目以降のページロード時には...
-
javascriptのエラーで質問です。
-
改行をしたいが、<br>と...
-
クリックすると、色が変わるよ...
-
jQueryのCSSで値に変数を使う方法
-
動画の上に広告をオーバーレイ...
おすすめ情報