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

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 children ；可以在属性中设置其他有效值

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

$(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"
        })
    }
})

.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*/
  }
}

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