在<样式>使用jQuery标记

Chaning content inside a <style> tag with jQuery

本文关键字：jQuery 标记 使用 样式 lt gt      更新时间：2023-09-26

我正在做一些事情，结果被困在了这里。我使用jQuery使用以下函数更改文本：

$('.css').text( newval );

嗯，有一个小转折。我不想更改<style>标记中的内容。如果我在<style class="css">中添加一个类，效果会很好，但它只适用于所有媒体。我不想用@media only screen and (min-device-width: 1024px0)来代替它。有什么方法可以更改里面的文本吗？即使使用不同的方法。

你能做下面这样的事情吗？

<span class="small-device-text">This is for small screens</span>
<span class="large-device-text">This is for large screens</span>

css-

.small-device-text { display: none; }
.large-device-text { display: block; }
@media only screen and (min-device-width: 1024px) {
    .small-device-text { display: block; }
    .large-device-text { display: none; }
}

如果您想更改css，请使用

if ($(window).width() >= 1024){
     $(".your-element").css("background-color", "yellow");
}

如果你打算这样做，那么你也可以在css中使用媒体查询。

 @media screen and (min-width: 1024px){.element{background-color:yellow}}

如果您想更改不同的属性，请使用

 $( ".your-element" ).attr( "attribute", "New attribute text" );

您可以通过jQuery（或更好地通过JavaScript）操作CSS样式表规则，包括媒体规则：

$(document).ready(function() {
    // your style tag, add media rules and css rules in one line...
    $('style').text("@media screen and (min-width:200px) { .css { color: yellow; } }");
    // or in pure js
    document.querySelector('style').textContent += "@media screen and (min-width:400px) { .css { color: red; } }";
});

示例如下。

经过一些工作，我找到了一个解决方案：

$('body').append("<style type='text/css' id='phonecss'></style>");
$('#phonecss').html("@media only screen  and (min-device-width: 320px)  and (max-device-width: 667px) { " + newval + " }");

其中newval是包含CSS的变量。希望它能帮助其他人

顺便说一句，谢谢你的帮助。

问候，

Hardeep

相关文章：