TextRange对象参考2

属性

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对象绑定的矩形的边界。

语法

object.boundingTop;

你可以在后面的Supported by object章节中找到关联的对象。

这个属性是只读的。

可能的值

符合绑定矩形的顶坐标的整型数。

默认值：这个属性没有默认值。

boundingLeft属性

返回一个整型数值，指定绑定到当前TextRange对象的边界矩形的左边缘坐标，以像素为单位。

boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够取得一个TextRange对象绑定的矩形的边界。

语法

object.boundingLeft;

你可以在后面的Supported by object章节中找到关联的对象。

这个属性是只读的。

可能的值

符合绑定矩形的左坐标的整型数。

默认值：这个属性没有默认值。

boundingWidth属性

返回一个整型数值，指定绑定到当前TextRange对象的边界矩形的宽度，以像素为单位。

boundingLeft、boundingTop、boundingWidth和boundingHeight属性能够取得一个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属性。

语法

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, "&lt;");
            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>

TextRange对象参考2

属性

boundingHeight属性

语法

可能的值

boundingTop属性

语法

可能的值

boundingLeft属性

语法

可能的值

boundingWidth属性

语法

可能的值

htmlText属性

语法

可能的值

offsetLeft属性

语法

可能的值

offsetTop属性

语法

可能的值

示例代码1

text属性

语法

可能的值

示例代码2

示例代码3

示例代码4

樊潇洁

引用和评论

又升级了自己写的在线编辑器，给它加了正则表达式查找替换功能

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具