以编程方式添加/更改样式标记？

Question

在相关的question中，我建议我可以通过编辑元素＆＃39;样式来动态更新媒体查询。标签。我知道可以使用.css方法使用jquery完成，但显然样式标记本身需要更新。

我的最终目标是附加整个媒体查询，我可以用这里提到的更好的.css方法。如果我使用.css，那么屏幕上的类和媒体查询会有什么变化。但是，我只想更改媒体查询。问题是我试图改变样式标签中的字体颜色并且到目前为止没有运气。

到目前为止，我很欣赏所有回复。

这是我到目前为止所尝试的内容：

＆＃13;

＆＃13;

function myFunction() {
    $('.changeMe').append("<style type='text/css'>color:blue</>")
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一段代码片段，显示使用.css更改屏幕上我不想要的div。

＆＃13;

＆＃13;

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();
  
});

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一个代码片段，我想添加我需要的媒体查询。

＆＃13;

＆＃13;

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();
  
});

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

谢谢， 马特

Answer 1

问题＃1在你当前的设置中它只会产生这个（你基本上是在你的段落中附加）：

<p class="changeMe">Change My Color To Blue by adding a style tag<style type="text/css">color:blue</></style></p>

问题＃2（一旦你解决问题1）如果你的用户一直在敲击那个按钮怎么办？它将继续在那里附加越来越多的样式标签

更好的方法是只针对您现有的元素类

<p class="changeMe">Change My Color To Blue by adding a style tag</p>

向页面添加一个样式元素，并以该类为目标，只需在需要更改时替换整个内容：

<style class="changeMe_styles">
</style>

在事件发生的JS中

$(".changeMe_styles").text("@media (min-width: 900px) {.changeMe{ color: blue;}}");

Answer 2

您尝试将整个样式标记添加到元素中。在这里，我使用了jQuery .css()方法来改变颜色。

仔细阅读here。

＆＃13;

＆＃13;

function myFunction() {
    $('.changeMe').css("color", "blue")
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要使用jQuery更改给定元素的CSS，您可以使用它的.css()函数。详细了解here

函数中的第一个值定义了要更改的属性（在我们的例子中是它的颜色），第二个值是您希望应用于它的值（在我们的例子中它是蓝色的）

function myFunction() {
    $('.changeMe').css("color","blue");
}

为了更清晰，这几乎可以用于任何CSS。 E.G。

//change BG color
.css('background-color', 'red');

//change width
.css('width', '100px');

//change font size
.css('font-size', '16px');

Answer 4

你实际上并不遥远。尝试将整个媒体查询及其内容附加到正文/头部（无法记住每个人在这种情况下的行为）：

function myFunction()
  {
    $('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*styling stuff*/ }</style>");
  }

显然，您可以更改媒体查询类型。我见过以前用过的那么成功，祝你好运。

Answer 5

您正试图在p标签中附加。它只会附加在for event in data['Records']: if event['eventName'] in event_list: dateEvent = datetime.strptime(event['eventTime'], "%Y-%m-%dT%H:%M:%SZ") user_identity = event['userIdentity'] # check to see if we have a sessionContext[sessionIssuer] if 'sessionIssuer' in user_identity.get('sessionContext', {}): user_name = user_identity['sessionContext']['sessionIssuer']['userName'] arn = user_identity['sessionContext']['sessionIssuer']['arn'] else: user_name = user_identity['userName'] arn = user_identity['arn'] 。

head