属性
boundingHeight属性
返回一个整型数值,指定绑定到当前TextRange对象的边境矩形的高度,以像素为单元。
boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够获得一个TextRange对象绑定的矩形的边境。
假如你须要一个TextRange对象的准确外形,请运用getClientRects要领。它能获得一个TextRanges鸠合,包含了多少TextRectangle对象。每一个TextRectangle对象代表了从属于这个TextRange对象的一行文本。上述一切的坐标都是相对于浏览器窗口的左上角。
语法
object.boundingHeight;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
相符绑定矩形的高度的整型数。
默认值:这个属性没有默认值。
boundingTop属性
返回一个整型数值,指定绑定到当前TextRange对象的边境矩形的顶边沿坐标,以像素为单元。
boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够获得一个TextRange对象绑定的矩形的边境。
假如你须要一个TextRange对象的准确外形,请运用getClientRects要领。它能获得一个TextRanges鸠合,包含了多少TextRectangle对象。每一个TextRectangle对象代表了从属于这个TextRange对象的一行文本。上述一切的坐标都是相对于浏览器窗口的左上角。
语法
object.boundingTop;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
相符绑定矩形的顶坐标的整型数。
默认值:这个属性没有默认值。
boundingLeft属性
返回一个整型数值,指定绑定到当前TextRange对象的边境矩形的左边沿坐标,以像素为单元。
boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够获得一个TextRange对象绑定的矩形的边境。
假如你须要一个TextRange对象的准确外形,请运用getClientRects要领。它能获得一个TextRanges鸠合,包含了多少TextRectangle对象。每一个TextRectangle对象代表了从属于这个TextRange对象的一行文本。上述一切的坐标都是相对于浏览器窗口的左上角。
语法
object.boundingLeft;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
相符绑定矩形的左坐标的整型数。
默认值:这个属性没有默认值。
boundingWidth属性
返回一个整型数值,指定绑定到当前TextRange对象的边境矩形的宽度,以像素为单元。
boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够获得一个TextRange对象绑定的矩形的边境。
假如你须要一个TextRange对象的准确外形,请运用getClientRects要领。它能获得一个TextRanges鸠合,包含了多少TextRectangle对象。每一个TextRectangle对象代表了从属于这个TextRange对象的一行文本。上述一切的坐标都是相对于浏览器窗口的左上角。
语法
object.bouindingWidth;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
相符绑定矩形的左坐标的整型数。
默认值:这个属性没有默认值。
htmlText属性
返回属于一个TextRange对象的HTML源码,作为一个字符串。
假如你想用一个HTML花样的字符串修正一个TextRange对象的内容,请运用pasteHTML要领。要想设置或许获得一个TextRange对象内部的文本内容,请运用text属性。
语法
object.htmlText;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
代表内容的字符串,用HTML的花样。
默认值:这个属性没有默认值。
offsetLeft属性
返回一个对象相对于它的定位父元素[1]的左边沿的左坐标位置,以像素为单元。
这个返回的左坐标值包含了padding、转动条以及border,然则不包含margin。
假如你须要只包含对象的padding的左坐标位置,请连系运用clientLeft以及offsetLeft属性。
一个可程度转动的对象,欲设置或许获得它的内容的像素数,请运用scrollLeft属性。
假如你须要这个浏览器窗口的左坐标值,请运用screenX或screenLeft属性。
你能够用left、pixelLeft以及posLeft款式属性设置一个元素的左坐标位置。在这类情况下,这个值指定了对象左坐标位置,包含了padding、转动条、border以及margin。你能够用差别的单元获得left款式属性的值,而不是衬着元素的左坐标植。
- 假如你须要一个元素的宽度,请运用clientWidth、offsetWidth以及scrollWidth属性以及getBoundingClientRect要领。
TextRange对象的offsetLeft以及offsetTop属性与别的的offsetLeft属性和offsetTop属性是差别的。这些属性返回TextRange对象的内容的最先位置,以像素为单元。它返回的坐标相对于浏览器窗口的左上角。
语法
object.offsetLeft;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
整型数,返回左边位置,以像素为单元。
默认值:这个属性没有默认值。
offsetTop属性
返回一个对象相对于它的定位父元素[1]的顶边沿的顶坐标位置,以像素为单元。
这个返回的左坐标值包含了padding、转动条以及border,然则不包含margin。
假如你须要只包含对象的padding的顶坐标位置,请连系运用clientTop以及offsetTop属性。
一个可垂直转动的对象,欲设置或许获得它的内容的像素数,请运用scrollTop属性。
假如你须要这个浏览器窗口的顶坐标值,请运用screenY或screenTop属性。
你能够用top、pixelTop以及posTop款式属性设置一个元素的左坐标位置。在这类情况下,这个值指定了对象左坐标位置,包含了padding、转动条、border以及margin。你能够用差别的单元获得top款式属性的值,而不是衬着元素的顶坐标植。
假如你须要一个元素的宽度,请运用clientHeight、offsetHeight以及scrollHeight属性以及getBoundingClientRect要领。
要想获得一个对象的左位置,请运用offsetLeft属性。
TextRange对象的offsetLeft以及offsetTop属性与别的的offsetLeft属性和offsetTop属性是差别的。这些属性返回TextRange对象的内容的最先位置,以像素为单元。它返回的坐标相对于浏览器窗口的左上角。
语法
object.offsetTop;
你能够在后面的Supported by object章节中找到关联的对象。
这个属性是只读的。
能够的值
整型数,返回顶侧位置,以像素为单元。
默认值:这个属性没有默认值。
示例代码1
这个示例获得了Internet Explorer中选中的内容的定位:
text属性
用一个字符串设置一个TextRange对象内部的文本,或许返回一个TextRange对象内部的文本,作为一个字符串。
假如你想获得一个TextRange对象的HTML花样的内容,请运用htmlText属性。假如想用一个HTML花样的字符串替代其内容,请用pasteHTML要领。
在别的浏览器中,selectionRange对象的toString要领能够起到近似的作用。
语法
object.text;
你能够在后面的Supported by object章节中找到关联的对象。
这是一个可读可写属性。
能够的值
设置或许获得TextRange对象的文本内容字符串。
默认值:这个属性没有默认值。
HTML
<head> <script type="text/javascript"> function Init () { UpdateInfo (); if (document.attachEvent) { // Internet Explorer document.attachEvent ("onselectionchange", UpdateInfo); } else { alert ("Your browser does not support this example!"); } } function UpdateInfo () { var info = document.getElementById ("info"); if (document.selection === undefined) { info.innerHTML = "Your browser does not support this example!"; return; } if (document.selection.type == "None") { info.innerHTML = "No content is selected, or the selected content is not available!"; } else { var textRange = document.selection.createRange (); var message = "The start point of the selection, relative to the top-left corner of the browser's client area:<br />"; message += "left: " + textRange.offsetLeft + "<br />"; message += "top: " + textRange.offsetTop + "<br />"; message += "<br />The bounding rectangle of the selection, relative to the top-left corner of the browser's client area:<br />"; message += "left: " + textRange.boundingLeft + "<br />"; message += "top: " + textRange.boundingTop + "<br />"; message += "width: " + textRange.boundingWidth + "<br />"; message += "height: " + textRange.boundingHeight + "<br />"; info.innerHTML = message; } } </script> </head> <body onload="Init ();"> <div onscroll="UpdateInfo ();" style="padding:100px; height:100px; width:400px; overflow:scroll;"> <nobr>Select some content within this field.</nobr> <nobr>The coordinates of the selected content's boundary rectangle</nobr> <nobr>are visible in the field below</nobr> </div> <br /><br /> <div id="info" style="background-color:#e0c0a0;"></div> </body>
示例代码2
这个示例演示了怎样运用htmlText和text属性。
HTML
<head> <script type="text/javascript"> function Init () { UpdateInfo (); if ('onselectionchange' in document) { // Internet Explorer // the attachEvent method can also be used in IE9, // but we want to use the cross-browser addEventListener method if possible if (document.addEventListener) { // IE from version 9 document.addEventListener ("selectionchange", UpdateInfo, false); } else { if (document.attachEvent) { // IE before version 9 document.attachEvent ("onselectionchange", UpdateInfo); } } } else { if (document.addEventListener) { // Firefox, Opera, Google Chrome and Safari document.addEventListener ("mouseup", UpdateInfo, false); } } } function UpdateInfo () { var info = document.getElementById ("info"); var selText = ""; var selHTML = ""; info.innerHTML = ""; if (window.getSelection) { // all browsers, except IE before version 9 var selectionRange = window.getSelection (); selText = selectionRange.toString (); // similar to the htmlText property in Internet Explorer if (selectionRange.rangeCount > 0) { var range = selectionRange.getRangeAt (0); var docFragment = range.cloneContents (); var tmpDiv = document.createElement ("div"); tmpDiv.appendChild (docFragment); selHTML = tmpDiv.innerHTML; } } else { // Internet Explorer before version 9 var textRange = document.selection.createRange (); selText = textRange.text; selHTML = textRange.htmlText; } var message = "The text content of the selection:<br />"; message += selText + "<br /><br />"; message += "The contents in HTML format:<br />"; selHTML = selHTML.replace (/</g, "<"); message += selHTML; info.innerHTML = message; } </script> </head> <body onload="Init ();"> <div style="width:350px; background-color:#e0e0a0;"> <nobr>Select <b>some content</b> within this field.</nobr> <nobr>The <i>selected content</i> is visible in the field below</nobr> <nobr>in text and HTML format.</nobr> </div> <br /><br /> <div id="info" style="background-color:#e0c0a0;" unselectable="on"></div> </body>
示例代码3
这个示例获得一个元素的位置,相对于浏览器窗口左上角,用offsetLeft、offsetTop、scrollLeft以及scrollTop属性。请看getBoundingClientRect要领的页面以获得相似的功用。
HTML
<head> <script type="text/javascript"> function GetOffset (object, offset) { if (!object) return; offset.x += object.offsetLeft; offset.y += object.offsetTop; GetOffset (object.offsetParent, offset); } function GetScrolled (object, scrolled) { if (!object) return; scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop; if (object.tagName.toLowerCase () != "html") { GetScrolled (object.parentNode, scrolled); } } function GetTopLeft () { var div = document.getElementById ("myDiv"); var offset = {x : 0, y : 0}; GetOffset (div, offset); var scrolled = {x : 0, y : 0}; GetScrolled (div.parentNode, scrolled); var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y; alert ("The top-left corner of the div relative to the top-left corner of the browser's client area: \n" + " horizontal: " + posX + "px\n vertical: " + posY + "px"); } </script> </head> <body> <div style="height:200px; width:300px; overflow:auto;"> <div id="myDiv" style="width:200px; border:1px solid red;"> You can get the top-left corner of this element relative to the top left corner of the client area with the button below.<br /> Use the scrollbars to test it for different positions. </div> <div style="width:1000px; height:1000px;"></div> </div> <br /> <button onclick="GetTopLeft ();">Get the position of the element with red border!</button> </body>
示例代码4
这个示例演示了text属性的用法。
HTML
<head> <script type="text/javascript"> function GetSelectedText () { if (window.getSelection) { // all browsers, except IE before version 9 var mySelection = window.getSelection (); var selStr = mySelection.toString (); alert (selStr); } else { if (document.selection) { // Internet Explorer var textRange = document.selection.createRange (); alert (textRange.text); } } } </script> </head> <body> <div>Please select <b>all</b> or a <i>part</i> of this text.</div> <br /> <button onclick="GetSelectedText ();">Get selected text!</button> </body>