所选文本颜色更改

Selected text color change

本文关键字：颜色 文本      更新时间：2023-09-26

我有这种风格的html

<p class="paragraph" style="text-indent: 40px" align="justify" id="p5"> <span style="color:black"><a name="art1§2"></a>test<u><sup>o</sup></u> here comes a big text and blah blah lorem ipsum etc....</span>
    <div id="c5" class="spaceforOtherText"></div></p>

im使用此函数来突出显示并获取PARGRAPH ID（我也需要它）；

function changecolor(color)  {
  var selection;
  //Get the selected stuff
  if(window.getSelection)
    selection = window.getSelection();
  else if(typeof document.selection!="undefined")
    selection = document.selection;
  //Get a the selected content, in a range object
  var range = selection.getRangeAt(0);
  //If the range spans some text, and inside a tag, set its css class.
  if(range && !selection.isCollapsed)
  {
    if(selection.anchorNode.parentNode == selection.focusNode.parentNode)
    {
      var span = document.createElement('span');
span.style.color =color;
      range.surroundContents(span);
      var x = window.getSelection()
      var z = x.anchorNode.parentNode
      //o que vai ta dentro do p em html
       var html = z.parentNode.innerHTML;
      var id = z.parentNode.id;
       alert(z.parentNode.innerHTML);
     alert(z.parentNode.id);
    Android.save(id, html);
    }
  }

但是这个代码不允许我编辑文本颜色两次，我的意思是，如果我有这个文本：

<span style"color:red">This is a sample text</span>

如果我想将"一个样本"更改为蓝色，我不能，什么都没发生，它看起来像父跨度阻止了它，即使跨度在我想更改颜色的文本中，我也不能=/

这是javascript代码中的"问题"吗？

我怎么能保证它会返回给我，有时它会返回null，我认为z.parentNode是100%保证的

CSS适用于属性、元素概念。class、id、name等属性以及div、span、p等元素。。可以通过使用属性来更改元素中的值。。

作为您的问题，您可以使用多个跨度进行ex-

<span style"color:red">This is </span>
<span id='anyid'>a sample</span> 
<span id='anyid'>text</span>

通过这样做，您可以很容易地更改样本的颜色。

相关文章：