JavaScript DHTML/Javascript Objects/styleSheet — различия между версиями

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

Текущая версия на 07:23, 26 мая 2010

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