document.styleSheets removes Webkit specific CSS rules
Question
Take a look at this HTML, CSS and JavaScript :
<html>
<head>
<style type="text/css">
body {
-webkit-text-size-adjust: none;
font-size: 14px;
}
html{
padding: 0;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.each(document.styleSheets, function () {
var cssRules = this.cssRules;
if (cssRules && cssRules.length && this.href === null) {
var css = '';
$.each(cssRules, function () {
css += this.cssText;
});
document.write(css);
}
});
})
</script>
</head>
<body>
</body>
</html>
Basically, all it does is output the stylesheets in the current document read with JS through document.styleSheets .
Now, the problem: document.styleSheets does not contain Webkit specific styles. Instead, those styles are removed.
In my example body has -webkit-text-size-adjust: none; but this rule is not output as you can see on the right.
Why is that?
And more importantly: How can I get that rule through document.styleSheets ?
1 answers
solution1
1 ACCPTED 2015-06-02 14:45:00
"text-size-adjust" isn't supported by any non-mobile browsers , so if you're doing this on a desktop it's not appearing because the rule literally doesn't exist to the browser.
If you try your code with a supported rule (as below), you'll see the rule with the vendor prefix in your document.write()
body {
-webkit-transition: all 4s ease;
font-size: 14px;
font-weight: bold;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.