JavaScript document.styleSheets Property
February 8, 2021 10:45 am IST
JavaScript document.styleSheets Property The document.styleSheets
property returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into, or embedded in a document.
Note : The CSS files used in the following examples are red.css and green.css
Example <!DOCTYPE html>
<html >
<head >
<link rel ="stylesheet" title ="red" type ="text/css" href ="red.css" >
<link rel ="stylesheet" title ="green" type ="text/css" href ="green.css" >
</head >
<body >
<button onclick ="myFunction()" >Click Me</button >
<p id ="point" ></p >
<script >
var x = document .getElementById ("point" );
function myFunction (){
x .innerHTML = document .styleSheets .length ;
}
</script >
</body >
</html >
Syntax Return Values Value Explanation Object Returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into, or embedded in a document.
Count the Number of Rules Used in CSS File Note : The CSS files used in the following examples are blue.css and green.css
Example <!DOCTYPE html>
<html >
<head >
<link rel ="stylesheet" title ="blue" type ="text/css" href ="blue.css" >
<link rel ="stylesheet" title ="green" type ="text/css" href ="green.css" >
</head >
<body >
<button onclick ="myFunction()" >Click Me</button >
<p id ="point" ></p >
<script >
var x = document .getElementById ("point" );
function myFunction (){
x .innerHTML = document .styleSheets [0 ].cssRules .length ;
}
</script >
</body >
</html >
Display CSS File Note : The CSS files used in the following examples are blue.css and brown.css
Example <!DOCTYPE html>
<html >
<head >
<link rel ="stylesheet" title ="blue" type ="text/css" href ="blue.css" >
<link rel ="stylesheet" title ="brown" type ="text/css" href ="brown.css" >
</head >
<body >
<button onclick ="myFunction()" >Click Me</button >
<p id ="point" ></p >
<script >
var x = document .getElementById ("point" );
var css1 = document .styleSheets [0 ];
var len = css1 .cssRules .length ;
var txt = "" ;
function myFunction (){
for (var i = 0 ; i < len ; i ++ ){
txt += css1 .cssRules [i ].cssText + "<br>" ;
}
x .innerHTML = txt ;
}
</script >
</body >
</html >
Reminder Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript .
Please do google search for:
Join Our Channel Join our telegram channel to get an instant update on depreciation and new features on HTML , CSS , JavaScript , jQuery , Node.js , PHP and Python .
This channel is primarily useful for Full Stack Web Developer.
Share this Page Meet the Author