从div中选定的范围/文本中删除样式

Question

请考虑以下代码段:

<div>
     <span style="color:red;">a</span>
     <span style="color:blue;">a</span>
     <span style="color:white;">a</span>
</div>

如何从用户文本中删除样式？

---

编辑:添加OP的说明:

谢谢您的回答!我必须更精确.对不起."用户文本选择"是什么意思:用鼠标选中/突出显示.我有很多内部跨度的div(就像它在下面 - 没有额外的id,跨越的类:/).

[...]
<div>
 <span style="color:red;">a</span>
 <span style="color:blue;">b</span>
 <span style="color:white;">c</span>
</div>
<div>
 <span style="color:red;">d</span>
 <span style="color:blue;">a</span>
 <span style="color:white;">a</span>
</div>
[...]

我想要实现的目标:用户选择鼠标"ab",单击按钮(输入类型=按钮),从选定的跨度/跨度中删除样式.像TinyMCE一样的类似行为.

Answer 1

我不确定你用"用户文本选择"是什么意思,但如果你的意思是你希望用户能够点击文本来删除它的颜色,你可以用jQuery这样做:

尝试一下: http ://jsfiddle.net/v24fZ/

$(function() {
    $('div > span').click(function() {
        $(this).removeAttr('style');
    });
});

请注意,这将影响<span>作为a的子元素的所有元素<div>,因此最好在其上放置ID属性<div>以确保您具有正确的属性.

试一试: http ://jsfiddle.net/v24fZ/1/

<div id="myID"><span style="color:red;">a</span><span style="color:blue;">a</span><span style="color:white;">a</span></div>

然后

$(function() {
    $('#myID > span').click(function() {
        $(this).removeAttr('style');
    });
});

另请注意,这将删除所有内联样式.如果您只想删除颜色,请执行以下操作:

试一试: http ://jsfiddle.net/v24fZ/2/

$(function() {
    $('#myID > span').click(function() {
        $(this).css('color', '');
    });
});

• http://api.jquery.com/removeAttr/
• http://api.jquery.com/css/
• http://api.jquery.com/click/