在jQuery中使用<style>标记链接内容

我正在处理某些事情，并在此处卡住。我使用jQuery使用此功能来改变文字：在jQuery中使用<style>标记链接内容

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

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

来源

2016-01-08 user1480226

你的意思是你想要的内容文本在不同的屏幕尺寸不同？ –

显示了你的风格标记和你想要的内容 – Apolo

我不确定，但是你不能这样做：document.querySelector（'style'）。textContent + =“@media screen and（min -device-width：1024px）{div {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

来源

2016-01-26 21:24:16 user1480226

如果你想如果你打算做更改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");

来源

2016-01-08 18:49:09

你可以不喜欢以下？

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

来源

2016-01-08 18:54:30

可以（通过JavaScript或更好）通过jQuery操纵CSS styleheet规则，包括媒体的规则：

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

来源

2016-01-08 19:22:49

在jQuery中使用<style>标记链接内容

回答

相关问题