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

【问题标题】：Remove style from selected span/text in div从 div 中的选定范围/文本中删除样式
【发布时间】：2011-03-23 18:12:28
【问题描述】：

考虑一下这个sn-p：

<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 中的类似行为。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我不确定您所说的“由用户文本选择”是什么意思，但如果您的意思是希望用户能够单击文本以移除其颜色，您可以用 jQuery 这样做：

试试看： http://jsfiddle.net/v24fZ/

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

请注意，这将影响作为<div> 子级的所有<span> 元素，因此最好在<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', '');
    });
});

【讨论】：

【解决方案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，所以我不会重复。

【讨论】：

【解决方案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>

【讨论】：