-2
関連するquestionでは、要素の 'style'タグを編集してメディアクエリを動的に更新できることが示唆されています。 .cssメソッドを使ってjqueryで行うことができますが、スタイルタグ自体を更新する必要があります。プログラムでスタイルタグを追加/変更しますか？
私の究極の目標は、ここで述べたように、.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>おかげで、 マット
jQuery CSSを動的に適用する正しい方法については、[doc]（http://api.jquery.com/css/）をお読みください。 – Andrei
それでは、これをやってテーマを使用しない方が良い設計です.... – epascarello
私は答えOPを残しましたが、なぜjQueryターゲット要素のスタイルを変更するのではなく、メディアクエリを更新したいのですか？ – DMcCallum83