-2
在相关的question有人建议我可以通过编辑元素的'style'标签来动态更新媒体查询。我知道它可以使用.css方法使用jquery完成，但显然style标签本身需要更新。以编程方式添加/更改样式标签？
我的最终目标是追加整个媒体查询，我不能这样做，如这里所述，更好的.css方法。如果我使用.css，那么屏幕上的类和媒体查询会发生什么变化。但是，我只想更改媒体查询。问题是我试图改变样式标签中的字体颜色，并且迄今没有运气。
我很欣赏迄今为止所有的回复。
这里是我到目前为止已经试过：
function myFunction() {
$('.changeMe').append("<style type='text/css'>color:blue</>")
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me to change text from black to blue</button>
<p class="changeMe">Change My Color To Blue by adding a style tag</p>这里是出使用的CSS改变，我不希望在屏幕上的DIV的代码片段。
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
function changeScale() {
var scale = .1;
console.log("scale:" + scale);
$('.myDivToPrint').css({
'-webkit-transform': 'scale(' + scale + ')',
'-moz-transform': 'scale(' + scale + ')',
'-ms-transform': 'scale(' + scale + ')',
'-o-transform': 'scale(' + scale + ')',
'transform': 'scale(' + scale + ')',
});
}
$(document).ready(function(){
draw_a();
});div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
@media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: pink;
}
.myDivToPrint {
background-color: yellow;
/*
-moz-transform: rotate(90deg) scale(0.3);
-ms-transform: rotate(90deg) scale(0.3);
-o-transform: rotate(90deg) scale(0.3);
-webkit-transform: rotate(90deg) scale(0.3);
transform: rotate(90deg) scale(0.3); /* Standard Property */
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
/*
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
*/
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<button onclick="changeScale();" class="no-print>">Change Scale (Want this to only change scale in media query.)</button>
<div class="myDivToPrint">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
</div>下面的代码片段会，我认为增加该媒体查询我所需要的。
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
function changeScale() {
var scale = .1;
console.log("scale:" + scale);
$('.myDivToPrint').append("<style type='text/css'>@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none){"
+ "-webkit-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-moz-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-ms-transform: -transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-o-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "</style>");
}
$(document).ready(function(){
draw_a();
});div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
@media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: pink;
}
.myDivToPrint {
background-color: yellow;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<button onclick="changeScale();" class="no-print>">Change Scale</button>
<div class="myDivToPrint">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
</div>谢谢， 马特
请阅读[doc]（http://api.jquery.com/css/），因为它会解释动态应用jQuery css的正确方法。 – Andrei
所以一个更好的设计是不这样做，并使用主题.... – epascarello
我离开了一个答案OP，但我不是100％为什么你想更新媒体查询，而不是改变jQuery目标元素的风格。 – DMcCallum83