JavaScript DHTML/Javascript Objects/styleSheet
Содержание
StyleSheet: owningElement
<html>
<body>
<style id="myS">
#myP1 {
color:red;
font-family:verdana;
font-size:16
}
#myP2 {
color:green;
font-family:times new roman;
font-size:18
}
</style>
<p id="myP1">text.</p>
<p id="myP2">text.</p>
<input type="button" value="owningElement" onclick="function1();">
<script language="JavaScript">
function function1() {
var m = document.styleSheets[0].owningElement.id;
alert(m);
}
</script>
Style Sheet "readOnly"
<html>
<body>
<style>
#myP1 { color:red; font-family:verdana; font-size:16 }
#myP2 { color:green; font-family:times new roman; font-size:18 }
</style>
<p id="myP1">This is a sample text.</p>
<p id="myP2">This is a second sample text.</p>
<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>
styleSheet rules
<html>
<body>
<style>body {background-color: white;}</style>
<button onclick="document.styleSheets(0).rules(0).style.backgroundColor = "blue";">
Change color
</button>
</body>
</html>
StyleSheets cssRules
<html>
<head>
<style>
#Layer1 {
font-family:Verdana;
color:blue
}
</style>
<script language="JavaScript">
function function1() {
var n = document.styleSheets[0].cssRules;
alert(n);
}
</script>
</head>
<body>
<div id="Layer1"
style="position:absolute;
width:264px;
height:147px;
z-index:1;
background-color: #FFFF99;
layer-background-color: #FFFF99;
border: 1px solid #000000;">
div element content.
</div>
<button onClick="function1();">Click here</button>
</body>
</html>
styleSheets "pseudoClass"
<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>
Style Sheets title
<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>
Style Sheet type
<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>
stylesSheets.imports parent Style Sheet
<html>
<body>
<style id="myStyle" type="text/css">@import url("external.css");</style>
<p id="myP1">sample text.</p>
<p id="myP2">sample text.</p>
<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>