Question

我正在做一些事情并被困在这里。我使用jQuery来使用此函数更改文本：

＆＃xA;＆＃xA;

  $（'。css'）。text（newval）;＆＃xA;

＆＃xA;＆＃xA;

嗯，有一点点扭曲。我不想更改＆lt; style＆gt; 标记内的内容。＆＃xA;如果我将一个类添加到＆lt; style class =“css”＆gt; 但它只适用于所有媒体。＆＃xA;我不想用 @media only screen和（min-device-width：1024px0）来做。有没有办法改变里面的文字？即使它使用不同的方法。

＆＃xA;＆＃xA;

＆＃xA;

Answer 1

如果你想改变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" );

Answer 2

你可以做以下的事情吗？

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

Answer 3

您可以通过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; } }";
});

示例是here。

Answer 4

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

$('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

使用jQuery在<style>标记内部处理内容

4 个答案: