所选文字颜色变化

Question

i have this style 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 using this function to highlight and get the PARAGRAPH ID(i need it too);

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);

    }
  }

but this code doesnt allow me to edit text color twice, i mean, if i have this text:

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

and if i want to change "a sample" to blue, i cant, nothing happens, its look like the parent span blocked it, even if the span is inside the text where i want to change color, i cant =/

its a "problem" in the javascript code?

and how can i guarantee that it will return me the , sometimes it return null, i think the z.parentNode its 100% guaranteed

Answer 1

CSS works in attributes,element concept. attributes like class, id, name etc and element like div, span, p etc .. you can change the values with in an element through using attributes..

As your problem you can use multiple span for ex -

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

.. by doing this you can easily change the color for a sample.