window.getSelection 使用 jquery 將類添加到選擇中

Question

我想選擇一個圖像並將一個類名添加到選擇中。 使用window.getSelection 。

function addClassName() {
     var sel = window.getSelection();
     //what goes here???
}


<input type='button' onclick='addClassName();' value='addClassName'/>

Answer 1

要將類添加到選擇中，您需要用<span>包裝它，否則它將不起作用。 這是解決方案。

    function addClassToSelection(){
    var sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
    if(sel.getRangeAt){ // thats for FF
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("span");
    newNode.setAttribute('class', 'someclass');
    range.surroundContents(newNode);
    } else { //and thats for IE7
    sel.pasteHTML('<span class="someclass">'+sel.htmlText+'</span>');

    }
    }

這應該會引導您朝着正確的方向前進。 按照您認為合適的方式對其進行修改。

在http://jsfiddle.net/wP8w9/2/檢查工作示例

Answer 2

$(sel).find('img').addClass('myClass');

這將獲取所選內容，將其轉換為 jQuery 對象，找到圖像並為其添加一個類。

我沒有測試過這個。

Answer 3

如果你想使用 javascript，你可以這樣做：

function addClassName() {
     $('img').addClass('newClass') // adds the class 'newClass' to all image objects
}


<input type='button' onclick='addClassName();' value='addClassName'/>

您也可以在該函數中使用除“img”之外的任何選擇器

Answer 4

var sel= window.getSelection().getRangeAt(0);

$(sel).addClass("someClass");

window.getSelection()將為您提供選擇，但不是當前（或突出顯示）的選擇。 您需要為此使用選擇的 getRangeAt 方法

Answer 5

獲取所選文本的類別

window.getSelection().baseNode.parentElement.className