gets the Fine-Grained CSS DOM Objects in Javascript
Description
CSSStyleDeclaration.getPropertyCSSValue method gets
CSSPrimitiveValue objects that represent
the values defined for each property in the style.
The following table describes the members of the CSSPrimitiveValue object.
| Member | Description | Returns |
|---|---|---|
| cssText | Gets a text representation of the value. | string |
| getFloatValue(type) | Gets a number value. | number |
| getRGBColorValue() | Gets a color value. | RGBColor |
| getStringValue() | Gets a string value. | string |
| primitiveType | Gets the unit type for the value. | number |
| , | Sets a numeric value. | void |
| , | Sets a value for a string-based value. | void |
CSSPrimitiveValue.primitiveType property tells you the units
that the value of the property has been expressed in.
The set of defined unit types is shown in the following table.
| Primitive Unit Type | Description |
|---|---|
| CSS_NUMBER | The unit is expressed as a number. |
| CSS_PERCENTAGE | The unit is expressed as a percentage. |
| CSS_EMS | The unit is expressed in ems. |
| CSS_PX | The unit is expressed in CSS pixels. |
| CSS_CM | The unit is expressed in centimeters. |
| CSS_IN | The unit is expressed in inches. |
| CSS_PT | The unit is expressed points. |
| CSS_PC | The unit is expressed in picas. |
| CSS_DEG | The unit is expressed in degrees. |
| CSS_RAD | The unit is expressed in radians. |
| CSS_GRAD | The unit is expressed in gradians. |
| CSS_MS | The unit is expressed in milliseconds. |
| CSS_S | The unit is expressed in seconds. |
| CSS_STRING | The unit is expressed as string |
| CSS_RGBCOLOR | The unit is expressed as a color |
Example
The following code uses the CSSPrimitiveValue Object.
<!DOCTYPE HTML>
<html>
<head>
<style title="core styles">
p {<!--from w w w . j a v a 2s. co m-->
color: white;
background-color: gray !important;
padding: 7px !important;
}
</style>
</head>
<body>
<p id="block1">This is a test.
</p>
<div id="placeholder"></div>
<script>
var placeholder = document.getElementById("placeholder");
displayStyles();
function displayStyles() {
var newElem = document.createElement("pre");
newElem.setAttribute("border", "1");
var style = document.styleSheets[0].cssRules[0].style;
for ( var i = 0; i < style.length; i++) {
var val = style.getPropertyCSSValue(style[i]);
if (val.primitiveType == CSSPrimitiveValue.CSS_PX) {
newElem.innerHTML+=style[i]+val.getFloatValue(CSSPrimitiveValue.CSS_PX)+"pixels";
newElem.innerHTML+=style[i]+val.getFloatValue(CSSPrimitiveValue.CSS_PT)+"points";
newElem.innerHTML+=style[i]+val.getFloatValue(CSSPrimitiveValue.CSS_IN)+"inches";
} else if (val.primitiveType == CSSPrimitiveValue.CSS_RGBCOLOR) {
var color = val.getRGBColorValue();
newElem.innerHTML+=style[i]+color.red.cssText + " " + color.green.cssText + " " + color.blue.cssText+ "(color)";
} else {
newElem.innerHTML+=style[i]+val.cssText+ "(other)";
}
}
placeholder.appendChild(newElem);
}
</script>
</body>
</html>