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

时间:2016-01-08 18:41:02

标签: javascript jquery css

我正在做一些事情并被困在这里。我使用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;

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

你可以做以下的事情吗?

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

答案 2 :(得分:0)

您可以通过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

答案 3 :(得分:0)

经过一番工作,我找到了解决方案:

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