如何删除从外部 css 文件 (<link rel="stylesheet" type="text/css" href="XXXX.css" media="screen">
) 加载的媒体查询?请注意,我无法禁用整个链接标记,因为该媒体查询中包含其他重要样式:
body{...}
.container{...}
...
@media(min-width:XXXpx) {
....
}
...
谢谢!
最佳答案
我强烈推荐针对这个问题的纯 CSS 解决方案,例如定义一个新的样式表来覆盖您不想要的规则。
#selector {
color: #000;
}
.some-classs-you-want-to-reserve {/*..*/}
@media only screen and (min-width: 600px) {
/* unwanted */
#selector {
display: none;
}
}
例如,如果您想在 @media only screen and (min-width: 600px)
中禁用规则,只需添加一个新的样式表将它们覆盖为默认值:
@media only screen and (min-width: 600px) {
/* unwanted */
#selector {
display: block;
}
}
如果你坚持使用Javascript,你可以通过迭代document.styleSheets
来访问和修改css规则。
- https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
- https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets
这是一个 StyleSheetList 的实例,一个类似数组的对象。它的每一项代表一个外部或内联的 css 样式表。包括媒体查询在内的所有规则都可以在其中找到。
一个简短的树结构:
- document.styleSheets
|- CSSStyleSheet
|- cssRules
|- media
下面的示例展示了如何删除 @media only screen and (min-width: 600px)
block 中定义的所有规则:
function removeRule() {
if(typeof window.CSSMediaRule !== "function")
return false; //Your browser doesn't support media query feature
var s = document.styleSheets, r,
i, j, k;
if(!s) return false; //no style sheets found
// walk throuth css sheets
for(i=0; i<s.length; i++) {
// get all rules
r = s[i].cssRules;
if(!r) continue;
for(j=0; j<r.length; j++) {
//If there's a rule for media query
if(r[j] instanceof CSSMediaRule &&
r[j].media.mediaText == "only screen and (min-width: 600px)") {
for(k=0; k<r[j].cssRules.length; k++) {
// remove all rules of it
r[j].deleteRule(r[j].cssRules[k]);
}
return true;
}
}
}
}
removeRule();
或现场 fiddle :http://jsfiddle.net/e4h41qm2/
关于Javascript:从外部 css 文件中删除媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26070565/