JavaScript DHTML/Javascript Objects/styleSheet

Материал из Web эксперт
Перейти к: навигация, поиск

StyleSheet: owningElement

   <source lang="html4strict">

<html> <body> <style id="myS">

  1. myP1 { 
   color:red; 
   font-family:verdana; 
   font-size:16

}

  1. myP2 { 
   color:green; 
   font-family:times new roman; 
   font-size:18

} </style>

text.

text.

<input type="button" value="owningElement" onclick="function1();"> <script language="JavaScript"> 

   function function1() {
       var m = document.styleSheets[0].owningElement.id;
       alert(m); 
   }

</script> 


     </source>


Style Sheet "readOnly"

   <source lang="html4strict">

<html> <body> <style>

  1. myP1 { color:red; font-family:verdana; font-size:16 }
  2. myP2 { color:green; font-family:times new roman; font-size:18 }

</style>

This is a sample text.

This is a second sample text.

<input type="button" value="style sheet source" onclick="function1();"> <script language="JavaScript"> function function1() { 

   var m = document.styleSheets[0].readOnly;
   if (m == true) {
       alert("The style sheet is defined on the page");
   } else {
       alert("The style sheet is imported");
   }

} </script> </body></html> 


     </source>


styleSheet rules

   <source lang="html4strict">

<html> <body> <style>body {background-color: white;}</style> <button onclick="document.styleSheets(0).rules(0).style.backgroundColor = "blue";"> Change color </button> </body> </html> 


     </source>


StyleSheets cssRules

   <source lang="html4strict">

<html> <head> <style>

  1. Layer1 { 
   font-family:Verdana; 
   color:blue

} </style> <script language="JavaScript"> 

   function function1() {
       var n = document.styleSheets[0].cssRules;
       alert(n);
   }

</script> </head> <body>

div element content.

<button onClick="function1();">Click here</button> </body> </html> 


     </source>


styleSheets "pseudoClass"

   <source lang="html4strict">

<html> <head> <style>@page:first { background-color: blue; }</style> <script language="JavaScript"> 

   function function1() {
       var m = document.styleSheets[0].pages[0];
       alert(m.pseudoClass);
   }

</script> </head> <body> <button onclick="function1();">First @page</button> </body> </html> 


     </source>


Style Sheets title

   <source lang="html4strict">

<html> <body> <style id="yourStyleSheet"> .body { font-family:verdana; color:blue } </style> <script language="JavaScript"> 

   document.getElementById("yourStyleSheet").title = "This is my internal style sheet";
   alert(document.styleSheets[0].title);

</script> </body> </html> 


     </source>


Style Sheet type

   <source lang="html4strict">

<html> <body> <link id="myStyle" rel="stylesheet" href="yourstyle.css" type="text/css"> <script language="JavaScript"> 

   function function1() {
       alert(document.styleSheets[0].type);
   }

</script> <input type="button" value="Click here" onClick="function1();"> </body> </html> 


     </source>


stylesSheets.imports parent Style Sheet

   <source lang="html4strict">

<html> <body> <style id="myStyle" type="text/css">@import url("external.css");</style>

sample text.

sample text.

<input type="button" value="The parent style sheet" onclick="function1();"> <script language="JavaScript"> 

   function function1() {
       alert(document.styleSheets[0].imports[0].href);
   }

</script> </body> </html> 


     </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Javascript_Objects/styleSheet&oldid=2705»