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>孩子的所有<div>元素，因此最好在<div>上放置ID属性，以确保您拥有正确的之一。

试一试： 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', '');
    });
});

Answer 2

“从用户文字中选择删除样式”

如果您的意思是使用点击事件进行选择，则应该是这样的：

var oldState = "";  //Code is untested, but I've written something similar recently
var $prevDiv;
$('#parentContainer span').click(function() {
    if(!$(this).hasClass('selected')) //tracking what is currently selected.
    { 
        if($prevDiv != null)
        {
            $prevDiv.removeClass('selected');  
            $prevDiv.attr('style', oldState);
        }
        $prevDiv = $(this);
        $(this).addClass('selected');
        oldState = $(this).attr('style');
        $(this).attr('style', '');

    }
    else 
    {
        //do nothing unless you need some reselected logic
    }
}

我认为@patrick dw覆盖了实际的api来更改属性，所以我不会重复它。

Answer 3

我完全赞同帕特里克。

您可能需要尝试以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div>
      <span style="color:red;">a</span>
      <span style="color:blue;">a</span>
      <span style="color:white;">a</span>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("span").click(function(){
          $(this).removeAttr("style");
        });
      });
    </script>
  </body>
</html>

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

3 个答案: