I want to remove those css style rules which are applied in media queries from a particular div (including its children too).
For eg.
.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*/
}
}
In the example .foo element css of media query should be removed but not css rules outside the media queries.
Edit, Updated
Try (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
Note, .foo{color: red;/*don't remove*/} remains set at .foo children ; possible to set other valid value at properties
$(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/
$(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>
css of all children ? Thanks.foo within @media (max-width: 768px){} . Elements having class .foo should have styles removed , including children of .foo. If possible , can post html , css of .foo children ? ThanksTry the following code. It might help you.
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>
If you want to remove the whole style attribute from the tag, try this.
document.getElementById("head").removeAttribute("style");
Setting inline styles with jQuery's css() method will overwrite the attributes within a media query.
function setStyles() {
if ($(window).width() <= 768){
$('.foo').css({
'background': 'none',
'font-size': '1em'
});
} else {
$('.foo').css({
'background': '',
'font-size': ''
});
}
}
setStyles();
$(window).resize(setStyles);
Reproduce the media query using resize() and a if width block to set new styles.
Use the else block to remove the inline styles, resulting back to your stylesheet attributes.
I don't know if I understood the question, but let me know if this is what you want?
.foo{
color: red;/*don't remove*/
}
@media (max-width: 768px){
div{
color: #000;/*don't remove*/
}
}<div class="foo">some text</div>
window.matchMedia()Start by reading the applied styles during a matched media query and remove them? Here is a read demonstrating similar