| Package | cssom.view |
| Interface | public interface TextRectangle |
| Introduced in: | DOM 0 |
See also
| Property | Defined By | ||
|---|---|---|---|
| CSSOM View bottom : Number [read-only]
Returns the distance between the top of the viewport and the bottom
of the rectangle box as number of CSS pixels. | TextRectangle | ||
| Non-Standard height : Number [read-only]
| TextRectangle | ||
| CSSOM View left : Number [read-only]
Returns the distance between the left of the viewport and the left
of the rectangle box as number of CSS pixels. | TextRectangle | ||
| CSSOM View right : Number [read-only]
Returns the distance between the left of the viewport and the right
of the rectangle box as number of CSS pixels. | TextRectangle | ||
| CSSOM View top : Number [read-only]
Returns the distance between the top of the viewport and the top of
the rectangle box as number of CSS pixels. | TextRectangle | ||
| Non-Standard width : Number [read-only]
| TextRectangle | ||
| CSSOM View bottom | property |
bottom:Number [read-only] | Product Versions : |  5.5 6.0 7.0 8.0 as IE7 8.0 as IE8  2.0 3.0 3.1b  3.0 3.1 4.0b  1.0 2.0  9.62 10.0a |
| Introduced in: | DOM 0 |
Returns the distance between the top of the viewport and the bottom of the rectangle box as number of CSS pixels.
public function get bottom():NumberSee also
<script>
function getCoords(oObject) {
oBndRct = oObject.getBoundingClientRect();
alert("Bounding rectangle = \nUpper left coordinates: "
+ oBndRct.left + " " + oBndRct.top +
"\nLower right coordinates: "
+ oBndRct.right + " " + oBndRct.bottom);
}
</script>
</head>
<body>
<p id=oPara onclick="getCoords(this)">| height | property |
height:Number [read-only] | Product Versions : | 5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a |
Non-standard (Mozilla)
public function get height():NumberSee also
| CSSOM View left | property |
left:Number [read-only] | Product Versions : | 5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a |
| Introduced in: | DOM 0 |
Returns the distance between the left of the viewport and the left of the rectangle box as number of CSS pixels.
public function get left():NumberSee also
<script>
function getCoords(oObject) {
oBndRct = oObject.getBoundingClientRect();
alert("Bounding rectangle = \nUpper left coordinates: "
+ oBndRct.left + " " + oBndRct.top +
"\nLower right coordinates: "
+ oBndRct.right + " " + oBndRct.bottom);
}
</script>
</head>
<body>
<p id=oPara onclick="getCoords(this)">| CSSOM View right | property |
right:Number [read-only] | Product Versions : | 5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a |
| Introduced in: | DOM 0 |
Returns the distance between the left of the viewport and the right of the rectangle box as number of CSS pixels.
public function get right():NumberSee also
<script>
function getCoords(oObject) {
oBndRct = oObject.getBoundingClientRect();
alert("Bounding rectangle = \nUpper left coordinates: "
+ oBndRct.left + " " + oBndRct.top +
"\nLower right coordinates: "
+ oBndRct.right + " " + oBndRct.bottom);
}
</script>
</head>
<body>
<p id=oPara onclick="getCoords(this)">| CSSOM View top | property |
top:Number [read-only] | Product Versions : | 5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a |
| Introduced in: | DOM 0 |
Returns the distance between the top of the viewport and the top of the rectangle box as number of CSS pixels.
public function get top():NumberSee also
<script>
function getCoords(oObject) {
oBndRct = oObject.getBoundingClientRect();
alert("Bounding rectangle = \nUpper left coordinates: "
+ oBndRct.left + " " + oBndRct.top +
"\nLower right coordinates: "
+ oBndRct.right + " " + oBndRct.bottom);
}
</script>
</head>
<body>
<p id=oPara onclick="getCoords(this)">| width | property |
width:Number [read-only] | Product Versions : | 5.5 6.0 7.0 8.0 as IE7 8.0 as IE8 2.0 3.0 3.1b 3.0 3.1 4.0b 1.0 2.0 9.62 10.0a |
Non-standard (Mozilla)
public function get width():NumberSee also
<p>Four score and seven years ago <b>our fathers<br>
brought forth . . . a new nation, conceived in liberty<br>
and dedicated to the proposition that all men are<br>
created equal.</b> Now we are engaged in a great civil war . . .
</p>
The four TextRectangle objects are:
If you resize the window containing this text, the TextRectangle objects do not update. Because the objects are a snapshot of the layout, the objects should update after an onresize event occurs.
The width of the TextRectangle may not be identical to the width of the TextRange it contains. A TextRange is only as wide as the text, but a TextRectangle is as wide as the element containing that text.