DOM:style
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron...
Spis treści |
[edytuj] Uwagi
See the following pages for information on some of the objects used to manipulate specified CSS properties using the DOM:
[edytuj] Material to be moved to other pages
The basic style object exposes the StyleSheet and the CSSStyleSheet interfaces from the DOM Level 2 Style specification. Those interfaces contain members like insertRule, selectorText, and parentStyleSheet for accessing and manipulating the individual style rules that make up a CSS stylesheet.
To get to the style objects from the document, you can use the document.styleSheets property and access the individual objects by index (e.g., document.styleSheets[0] is the first stylesheet defined for the document, etc.). Though there are various syntaxes for expressing stylesheets for a document, Netscape supports CSS exclusively, so the style object retrieved from this array implements both the StyleSheet and CSSStyleSheet interfaces.
var ss = document.styleSheets[1]; ss.cssRules[0].style.backgroundColor="blue";
The list of properties available in the DOM from the style property is given on the DOM CSS Properties List page.
Element style property can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyName, even though there may be other styles on the element from a stylesheet).
Also, when you set this property on an element, you override and erase any styles that have been set elsewhere for that element's particular property you are setting. Setting the border property, for example, will overide settings made elsewhere for that element's border property in the head section, or external style sheets. However, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example.
To change a particular element's style, you can adapt the following example for the element(s) you want to style.
<html>
<head>
<title>simple style example</title>
<script type="text/javascript">
function alterStyle(elem) {
elem.style.background = 'green';
}
function resetStyle(elemId) {
elem = document.getElementById(elemId);
elem.style.background = 'white';
}
</script>
<style type="text/css">
#p1 {
border: solid blue 2px;
}
</style>
</head>
<body>
<!-- passes a reference to the element's object as parameter 'this'. -->
<p id="p1" onclick="alterStyle(this)";>
Click here to change background color. </p>
<!-- passes the 'p1' id of another element's style to modify. -->
<button onclick="resetStyle('p1');">Reset background color</button>
</body>
</html>
The getComputedStyle() method on the document.defaultView object returns all styles that have actually been computed for an element. See Example 6: getComputedStyle in the examples chapter for more information on how to use this method.
[edytuj] DOM Style Object
The style object represents an individual style statement. Unlike the individual rules available from the document.styleSheets collection, the style object is accessed from the document or from the elements to which that style is applied. It represents the in-line styles on a particular element.
More important than the two properties noted here is the use of the style object to set individual style properties on an element:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>style Property Example</title>
<link rel="StyleSheet" href="example.css" type="text/css">
<script type="text/javascript">
function stilo()
{
document.getElementById("d").style.color = "orange";
}
</script>
</head>
<body>
<div id="d" class="thunder">Thunder</div>
<button onclick="stilo()">ss</button>
</body>
</html>
The media and type of the style may or may not be given. Note that you can also change style of an element by getting a reference to it and then use its setAttribute method to specify the CSS property and its value.
var el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");
Be aware, however, that setAttribute will remove all other style properties that may already have been defined in the element's style object. If the some-element element above had an in–line style attribute of say style="font-size: 18px", that value would have been removed by the use of setAttribute.
[edytuj] Własności
- style.media
- Specifies the intended destination medium for style information.
- style.type
- Returns the type of style being applied by this statement.