Question

我想删除那些在特定div（包括其子节点）的媒体查询中应用的css样式规则。

例如。

.foo{
  color: red;/*don't remove*/
}
@media (max-width: 768px){
  .foo{
    background-color: blue;/*remove*/
    font-size: .8em;/*remove*/
  }
  div{
    color: #000;/*don't remove*/
  }
}

在示例.foo元素中，应删除媒体查询的css，但不删除媒体查询之外的css规则。

Answer 1

修改，更新

尝试（v2）

HTML

<div class="foo">abc123
    <br /> <span>def789</span>
    <br /> <section>ghi456</section>
</div>

CSS

.foo{
  color: red;/*don't remove*/
}
@media (max-width: 768px){
  .foo{
    background-color: blue;/*remove*/
    font-size: .8em;/*remove*/
  }
  div{
    color: #000;/*don't remove*/
  }
}
@media (max-width: 768px){
  .foo span{
    color: green;/*remove*/
    font-size: 36px;/*remove*/
  }
.foo section{
    color: blue;/*remove*/
    font-size: 48px;/*remove*/
  }
}

js

注意，.foo{color: red;/*don't remove*/}仍设置在.foo个孩子;可以在属性

设置其他有效值

$(function() {
    if (window.innerWidth <= 768) {
        $("style").text(function (_, o) {
            return o.replace(/\.foo+\{\n+.*\n+.*\n+\s+\}(?=\n\s+div)/g, "")
        });
        $(".foo *").each(function (i, el) {
            el.style.all = "unset"
        })
    }
});

jsfiddle http://jsfiddle.net/guest271314/v7LLo7q1/1/

请参阅unset，all

＆＃13;

$(function() {
    if (window.innerWidth <= 768) {
        $("style").text(function (_, o) {
           return o.replace(/\.foo+\{\n+.*\n+.*\n+\s+\}(?=\n\s+div)/g, "")
        });
        $(".foo *").each(function (i, el) {
            el.style.all = "unset"
        })
    }
})

＆＃13;

.foo{
  color: red;/*don't remove*/
}
@media (max-width: 768px){
  .foo{
    background-color: blue;/*remove*/
    font-size: .8em;/*remove*/
  }
  div{
    color: #000;/*don't remove*/
  }
}
@media (max-width: 768px){
  .foo span{
    color: green;/*remove*/
    font-size: 36px;/*remove*/
  }
.foo section{
    color: blue;/*remove*/
    font-size: 48px;/*remove*/
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">abc123
    <br /> <span>def789</span>
    <br /> <section>ghi456</section>
</div>

＆＃13;

Answer 2

尝试以下代码。它可能会对你有帮助。

function f(){
    var h = document.getElementById("head");
    h.style.removeProperty("color");
}

<body onload="f();">
        <h1 id="head"style="background-color: green; color: red;">Removing a specific style</h1>
</body>

如果要从标记中删除整个样式属性，请尝试此操作。

document.getElementById("head").removeAttribute("style");

Answer 3

使用jQuery＆＃39; css()方法设置内联样式将覆盖媒体查询中的属性。

function setStyles() {
    if ($(window).width() <= 768){  
        $('.foo').css({
            'background': 'none',
            'font-size': '1em'
        });
    } else {
        $('.foo').css({
            'background': '',
            'font-size': ''
        });
    }
}

setStyles();

$(window).resize(setStyles);

使用resize()和if width块重现媒体查询以设置新样式。

使用else块删除内联样式，返回样式表属性。

jsFiddle Demo

Answer 4

我不知道我是否理解了这个问题，但请告诉我这是否是你想要的？

＆＃13;

.foo{
  color: red;/*don't remove*/
}
@media (max-width: 768px){
  div{
    color: #000;/*don't remove*/
  }
}

＆＃13;

<div class="foo">some text</div>

＆＃13;

从div中删除所有媒体查询css规则

4 个答案: