我有一个 html select
带有 id
的元素的 background
旨在为 <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: ??????;
}
}
最佳答案
我的解决方法如下。
HTML
我将值更改为数字“1-2-3...”并为每张图片添加了一个类“a-b-c...”
<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
我为每个类(class)指定了他自己的 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 - 如何使用 jquery 设置 css @media 打印样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40918595/