TextRange对象参考2

2024年1月20日 136次阅读 来源: 樊潇洁

属性

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, "&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>
    原文作者：樊潇洁
    原文地址: https://segmentfault.com/a/1190000002894963
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞