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方法

window.getSelection使用jquery将类添加到选择中

4 个答案:

检查http://jsfiddle.net/wP8w9/2/