<SCRIPT>
function fnFind(){
var sWhere = oSel.options[oSel.selectedIndex].text;
alert(oPara.getAdjacentText(sWhere));
}
</SCRIPT>
This is the text before (beforeBegin).
<P ID=oPara>
This is the text after (afterBegin).
<B>A few extra words.</B>
This is the text before (beforeEnd).
</P>
This is the text after (afterEnd).
getAdjacentText:<SELECT ID=oSel>
<OPTION SELECTED>beforeBegin
<OPTION>afterBegin
<OPTION>beforeEnd
<OPTION>afterEnd
</SELECT>
<INPUT TYPE="button" VALUE="Find text" onclick="fnFind()">getAttribute:<HEAD><STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>   <SCRIPT>
   function fnGet(){
      oPersistInput.load("oDataStore");
      oPersistInput.value=oPersistInput.getAttribute("sPersistAttr");
   }
   function fnSet(){
      oPersistInput.setAttribute("sPersistAttr",oPersistInput.value);
      oPersistInput.save("oDataStore");
   }
   function fnRem(){
      oPersistInput.removeAttribute("sPersistAttr");
      oPersistInput.save("oDataStore");
   }
</SCRIPT>
</HEAD><BODY >
<INPUT type=text class=userData id=oPersistInput> 
<INPUT type=button value="Get Attribute" onclick="fnGet()">
<INPUT type=button value="Set Attribute" onclick="fnSet()">
<INPUT type=button value="Remove Attribute" onclick="fnRem()">
</BODY>etBoundingClientRect:<HEAD>
<SCRIPT>
var timid = -1;
var timoID_2 = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;function LoadDone() {
    oTextRange = document.body.createTextRange();              
    // Get bounding rect of the range
    oRcts = oTextRange.getClientRects();
    nLine = 0;
    oBndRct = obj.getBoundingClientRect();
    nDivLen = oBndRct.right - oBndRct.left + 1;    
    MoveTo();
}function MoveTo() {
    if (nLine >= oRcts.length) {
    nLine = 0;
}
    obj.style.top = oRcts[nLine].top;
    nPosInLine = oRcts[nLine].left;
    nEraser = 0;
    timoID_2 = setInterval("MoveToInLine()",60);    
}function MoveToInLine() {
    if (nPosInLine >= oRcts[nLine].right - nDivLen) {
        clearInterval(timoID_2);
        timoID_2 = -1;
        obj.style.left = oRcts[nLine].right - nDivLen;
        nLine++;
        timid = setTimeout("MoveTo()", 100);
        return;
    }
    if (nEraser == 0) {
    nEraser = 1;
}
    else {
    nEraser = 0;
}
im.src = "/workshop/graphics/dot.gif";
    obj.style.left = nPosInLine;
    nPosInLine += 3;
}function End() {
    if(timid != -1) {
    clearInterval(timid);
        timid = -1;
}
    if(timoID_2 != -1) {
    clearInterval(timoID_2);
        timoID_2 = -1;
}
}
</SCRIPT>
</HEAD><BODY ID="bodyid" onload="LoadDone()"
    onresize="End();LoadDone();" onunload="End()">
<P STYLE="text-align:center">
<B>The quick brown fox jumps over the lazy dog.</B>
</P>
<DIV ID="obj" STYLE="position:absolute">
<IMG ID="im" SRC="/workshop/graphics/dot.gif"
    BORDER=0 HEIGHT=16 WIDTH=16>
</DIV>
</BODY>

解决方案 »

  1.   

    getClientRects:<HEAD>
    <SCRIPT>
    var rcts;
    var keyCount=0;function Highlight(obj) {            
        rcts = obj.getClientRects();
        rctLength= rcts.length;    if (keyCount > rctLength-1) {
            idBeige.style.display="none";
            keyCount = 0
        }    // set the rendering properties for the yellow DIV
        cdRight = rcts[keyCount].right + idBody.scrollLeft;
        cdLeft = rcts[keyCount].left + idBody.scrollLeft;
        cdTop = rcts[keyCount].top + idBody.scrollTop;
        cdBottom = rcts[keyCount].bottom + idBody.scrollTop;
        idYellow.style.top = cdTop;
        idYellow.style.width = (cdRight-cdLeft) - 5;
        idYellow.style.display = 'inline';    // set the rendering properties for the beige DIV
        bndRight = obj.getBoundingClientRect().right +
        idBody.scrollLeft;
        bndLeft = obj.getBoundingClientRect().left +
        idBody.scrollLeft;
        bndTop = obj.getBoundingClientRect().top +
        idBody.scrollTop;
        idBeige.style.top = bndTop;
        idBeige.style.width = (bndRight-bndLeft) - 5;
        idBeige.style.height = cdTop - bndTop;
        if (keyCount>0){
            idBeige.style.display = 'inline';
        }
        keyCount++;
    }
    </SCRIPT>
    </HEAD><BODY ID="idBody">
    <DIV ID="oID_1" onclick="Highlight(this)"
        onkeydown="Highlight(this)">
    A large block of text should go here. Click this
    block of text multiple times to see each line
    highlight with every click of the mouse button.
    Once each line has been highlighted, the process
    begins again starting with the first line.
    </DIV>
    <DIV STYLE="position:absolute; left:5; top:400;
    z-index:-1; background-color:yellow; display:none"
    ID="idYellow"></DIV>
    <DIV STYLE="position:absolute; left:5; top:400;
    z-index:-1; background-color:beige; display:none"
    ID="idBeige"></DIV>
    </BODY>
      

  2.   

    getAttributeNode():
    <a id=test name="Net_lover" href="http://lucky.myrice.com">test</a>
    <input value=test onclick="var obj = document.all.test.getAttributeNode('name');alert(obj.value)" type=Button>getExpression():<html>
    <head>
    <script language="JScript">
    var s;
    function fnInit() {
    Box3.style.setExpression("width","eval(Box1.value) + eval(Box2.value)",
    "jscript");
    }
    function getexp() {
    s=Box3.style.getExpression("width");
    alert("Expression for the width of the blue box is \n\n" + s + 
    "\n\nThe width property has a value of " + Box3.style.width);
    }
    </script>
    </head>
    <body onload=fnInit();>
    <input type=text id="Box1" value=40>
    <br><input type=text id="Box2" value=40>
    <br><input type=text id="Box3" style="background-color:blue">
    <br><input type=button id="Button2" value="Get expression" onclick="getexp()">
    </body>
    </html>