[英]How to set css @media print styling with jquery
我有一個background
為id
的html select
元素,用於設置<div class=”results-area”>
的背景圖像。 然后我有一個打印按鈕來打印.results-area
內容。
問題是,當我想要打印.results-area
我需要設置打印時要設置的背景圖像,如果我使用CSS @media print
我無法設置應該打印哪個背景的規則(基於用戶選擇)。
還有另一種方法可以實現嗎?
HTML
<select id="background">
<option value="url(picture1.jpg)">picture1</option>
<option value="url(picture2.jpg)">picture2</option>
<option value="url(picture3.jpg)">picture3</option>
<option value="url(picture4.jpg)">picture4</option>
<option value="url(picture5.jpg)">picture5</option>
<option value="url(picture6.jpg)">picture6</option>
</select>
<div class=”results-area”>
...
</div>
<a id="printMe" class="btn btn-warning">Print</a>
jQuery的
$('#background').change(function () {
$('.results-area').css("background-image", $(this).val());
})
$('#printMe').click(function () {
print()
});
CSS:
@media print {
.results-area{
background-image: ??????;
}
}
將<style>
標記添加到<head>
並為其指定一個ID:
<head>
...
<style id="bg-for-print"></style>
...
</head>
然后,當您想要更改背景圖像時,請選擇該樣式標記並設置相應的背景圖像:
$("#bg-for-print").text(
"@media print {" +
".results-area{" +
"background-image: url(" + backgroundUrl + ");" +
"}" +
"}"
);
我解決它的方式如下。
HTML
我將值更改為數字“1-2-3 ...”並為每張圖片添加了一個類“abc ...”
<select id="background">
<option class="a" value="1">Picture 1</option>
<option class="b" value="2">Picture 2</option>
<option class="c" value="3">Picture 3</option>
<option class="d" value="4">Picture 4</option>
<option class="e" value="5">Picture 5</option>
<option class="f" value="6">Picture 6</option>
</select>
<div class=”results-area”>
...
</div>
<a id="printMe" class="btn btn-warning">Print</a>
CSS
使用@media print
我為每個類指定了他自己的background-image
@media print {
.a {
background-image: url(image1.jpg) !important;
}
.b {
background-image: url(image2.jpg) !important;
}
.c{
background-image: url(image3.jpg) !important;
}
.d{
background-image: url(image4.jpg) !important;
}
.e {
background-image: url(image5.jpg) !important;
}
.f {
background-image: url(image6.jpg) !important;
}
}
JQuery的
$('#background').change(function () {
if ($(this).val() === "1") {
$('.results-area').css("background-image", "url(image1.jpg)");
replace();
$('.results-area').addClass("a");
}
else if ($(this).val() === "2") {
$('.results-area').css("background-image", "url(image2.jpg)");
replace();
$('.results-area').addClass("b");
}
else if ($(this).val() === "3") {
$('.results-area').css("background-image", "url(image3.jpg)");
replace();
$('.results-area').addClass("c");
}
else if ($(this).val() === "4") {
$('.results-area').css("background-image", "url(image4.jpg)");
replace();
$('.results-area').addClass("d");
}
else if ($(this).val() === "5") {
$('.results-area').css("background-image", "url(image5.jpg)");
replace();
$('.results-area').addClass("e");
}
else if ($(this).val() === "6") {
$('.results-area').css("background-image", "url(image6.jpg)");
replace();
$('.results-area').addClass("f");
}
else {
replace();
}
});
function replace() {
$('.results-area').removeClass("a b c d e f");
};
$('#printMe').click(function () {
print()
});
感覺這是一種瘋狂的做法,但它完成了這項工作。
我希望這也適合你!
使用jquery設置背景圖像並設置background-size:0;
默認情況下和background-size: inherit;
在印刷媒體
$('select').on('change', function() { $('.results-area').css("background-image",'url(\\''+this.value+'\\')'); }); $('#printMe').click(function () { window.print(); }); $('.results-area').css("background-image",'url(\\''+$('select')[0].value+'\\')');
.results-area{ width:225px; height:225px; background-size: 0; border:solid 1px red; } @media print { .results-area{ background-size: inherit; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selImage"> <option value="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTBoO6az8tPqavBo9xddKQynhqR8YSt4MUWTouGdFp7bWfxJiyW" selected>bg1</option> <option value="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSIo-K6XoQSaPZp_MP_TD4OeIdu229F4TCnZARtoiWvHJmI3iy8">bg2</option> </select> <input type="button" id="printMe" value="print"/> <div class="results-area"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.