HTML5 頁面編輯API之Range物件

2021-07-08 20:51:56 字數 901 閱讀 1165

range物件提供滑鼠選取功能,通過range物件可以獲得選取的內容,以及選取的內容的個數。

var s  = document.getselection();//此方法獲得選中內容

s,rangecount;//獲得選中個數

s.getrangeat(index);//獲得第index個選中的內容

var r = document.createrange();//獲得range物件

var node = $("#node");

r.selectnode(node);//選擇節點

r.selectnodecontents(node);//選擇節點中的內容

r.deletecontents();//從頁面上刪除節點或者節點中的內容,選擇的是節點刪除節點,選擇的是節點中的內容刪除內容

設定range的起始和結束:

1.先獲得需要刪除內容的節點

2.獲得內容

3.設定起始和結束

4.刪除

假設乙個div中是內容

var div = $("node");

var text = div.firstchild;//獲得內容不是子節點

r.setstart(text,1);//設定第乙個文字或字元為開始

r.setend(text,8);//設定第8個字元或文字為結束

r.deletecontents();//刪除

可通過r.setstartbefore(node)和r.setendafter(node);方法設定range的起始和結束,設定在乙個節點開始之前與乙個節點結束之後。

對應還有setstartafter(node);和setendbefore(node)節點開始後和節點結束前。

HTML5頁面增強元素

5增強的頁面元素 1.details元素和summary元素 details語義 詳情 summary語義 概要,簡要 details元素可以實現類似顯示 隱藏的功能。summary用於顯示details的標題或者間接。注意 1.如果details下沒有summary元素,瀏覽器會自動新增,同時內容...

html5頁面載入改背景

關於我的頁面在載入的時候需要進行通過js進行判斷進行啟動背景的啟動控制,特此備註 if clientname yigui else 通過jquery 可以進行直接更改樣式 var thisw window.innerwidth document.documentelement.clientwidth...

HTML5頁面檔案的基本結構

html頁面是靜態的,從頭到尾都沒有程式的執行,不經過伺服器處理就呈現給瀏覽者。doctype html utf 8 文章標題 title head body html 不是html標記,對大小寫不敏感。必須位於html文件第一行,用來告訴web瀏覽器當前頁面使用哪個版本 此標記限定了文件的開始和結...