javascript的range用法是什麼

藏色散人
發布: 2022-01-18 11:44:14
原創
2775 人瀏覽過

javascript的range物件是指html文件中的區域,其使用方法如「var elem=range.commonAncestorContainer;if(elem.nodeType != 1){...}」。

javascript的range用法是什麼

本文操作環境:Windows7系統、javascript1.8.5版、Dell G3電腦。

javascript的range用法是什麼?

JS Range 物件的使用

#一:什麼是Range物件

Range是指html文件中的區域,如使用者用滑鼠拖曳選取的區域,如下圖:

javascript的range用法是什麼

透過Range對象,可以取得使用者選取的區域,或指定選取區域,得到Range的起點和終點、修改或複製裡邊的文本,甚至是html。在富文本編輯器開發中,經常會使用到這些功能。

二:取得目前的選取範圍

由於相容性的問題,需要區分ie瀏覽器,

var selection, range;
if (window.getSelection) { 
    //现代浏览器
    selection = window.getSelection();
} else if (document.selection) { 
    //IE
    selection = document.selection.createRange();
}

//Range对象
range = selection.getRangeAt(0);
登入後複製

三:range屬性

> collapsed     如果范围的开始点和结束点在文档的同一位置,则为 true,即范围是空的,或折叠的。
> commonAncestorContainer     范围的开始点和结束点的(即它们的祖先节点)、嵌套最深的 Document 节点。
> endContainer         包含范围的结束点的 Document 节点。 
> endOffset     endContainer 中的结束点位置。
> startContainer     包含范围的开始点的 Document 节点。
> startOffset    startContainer中的开始点位置。
登入後複製

四:range操作

//选中区域的文字
var text = range.toString();

//选中区域的Element元素
var elem = range.commonAncestorContainer;
if(elem.nodeType != 1){
     elem = elem.parentNode;
}

//选中区域的html
var span = document.createElement('SPAN');
span.appendChild(range.cloneContents());

//选区是否为空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
   if (range.startOffset === range.endOffset) {
       isSelectionEmpty = true;
   }
}
登入後複製

推薦學習:《js基礎教學

以上是javascript的range用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!