Using getBoundingClientRect()



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/


<HTML>
<HEAD>
<TITLE>getClientRects() and getBoundClientRect() Methods</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function hilite() {
    var hTop, hLeft, hRight, hBottom, hWidth
    var select = document.forms[0].choice
    var n = parseInt(select.options[select.selectedIndex].value) - 1
    var clientRects = document.all.main.getClientRects()
    var mainElem = document.all.main
    if (n >= 0 && n < clientRects.length) {
        if (document.forms[0].fullWidth.checked) {
            hLeft = mainElem.getBoundingClientRect().left
            hRight = mainElem.getBoundingClientRect().right
        } else {
            hLeft = clientRects[n].left
            hRight = clientRects[n].right
        }
        document.all.hiliter.style.pixelTop = clientRects[n].top + 
            document.body.scrollTop
        document.all.hiliter.style.pixelBottom = clientRects[n].bottom
        document.all.hiliter.style.pixelLeft = hLeft + document.body.scrollLeft
        document.all.hiliter.style.pixelWidth = hRight - hLeft
        document.all.hiliter.style.visibility = "visible"
    } else if (n > 0) {
        alert("The content does not have that many lines.")
        document.all.hiliter.style.visibility = "hidden"
    }
}
</SCRIPT>
</HEAD>
<BODY onResize="hilite()">
<H1>getClientRects() and getBoundClientRect() Methods</H1>
<HR>
<FORM>
Choose a line to highlight:
<SELECT NAME="choice" onChange="hilite()">
<OPTION VALUE=0>
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
<OPTION VALUE=12>12
<OPTION VALUE=13>13
<OPTION VALUE=14>14
<OPTION VALUE=15>15
</SELECT><BR>
<INPUT NAME="fullWidth" TYPE="checkbox" onClick="hilite()">
Full Width (bounding rectangle)
</FORM>
<SPAN ID="main">
<P>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim adminim veniam, quis nostrud exercitation ullamco:</P>
<UL>
<LI>laboris
<LI>nisi
<LI>aliquip ex ea commodo 
</UL>
<P>Duis aute irure dolor in reprehenderit involuptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
cupidatat non proident, sunt in culpa qui officia deseruntmollit 
anim id est laborum Et harumd und lookum like Greek to me, dereud 
facilis est er expedit distinct.</P>

</SPAN>
<DIV ID="hiliter" 
STYLE="position:absolute; background-color:yellow; z-index:-1; visibility:hidden">
</DIV>
</BODY>
</HTML>

Related examples in the same category

1.	Paragraph Style
2.	Make text bold by replaces it in the tree with an Element node
3.	Using document create Style Sheet
4.	Reading the canHaveChildren Property
5.	Change the Text style Properties
6.	Change html style
7.	Dynamically Updating Styles Using DHTML
8.	Get Element style
9.	'EM' and 'P' element

Using getBoundingClientRect() : HTML Style « HTML « JavaScript DHTML

Related examples in the same category