javascript - How to change color of the selected text dynamically on click of button? - Stack Overflow

admin管理员组

文章数量:1193317

I am using the following code to change the color of text but it is not working.. Can anyone help me with this? the soloution in javascript or jquery anything is fine..

         var pinktext = "#cc0099";
        document.execCommand("ForeColor", false, pinktext);

I am using the following code to change the color of text but it is not working.. Can anyone help me with this? the soloution in javascript or jquery anything is fine..

         var pinktext = "#cc0099";
        document.execCommand("ForeColor", false, pinktext);

• javascript
• jquery
• html
• jquery-mobile

Share Improve this question Follow edited Jun 25, 2013 at 4:08 user1844039 asked Jun 25, 2013 at 4:03 user1844039user1844039 13311 gold badge11 silver badge88 bronze badges 5

• 2 why is this tagged in jQuery? – krishwader Commented Jun 25, 2013 at 4:06
• and show us your pinkText variable – krishwader Commented Jun 25, 2013 at 4:06
• Which browser causes troubles? – Teemu Commented Jun 25, 2013 at 4:11
• i m running this in chrome. – user1844039 Commented Jun 25, 2013 at 4:14
• Does it work in other browsers? Notice, that this "selected text" should not be in an input or textarea or any other element which can't have HTML. – Teemu Commented Jun 25, 2013 at 4:20

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 18

document.getElementById("change_color").onclick = function() {
  // Get Selection
  sel = window.getSelection();
  if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
  }
  // Set design mode to on
  document.designMode = "on";
  if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
  }
  // Colorize text
  document.execCommand("ForeColor", false, "red");
  // Set design mode to off
  document.designMode = "off";
}

<span id="content" contenteditable>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet odio eu magna mattis vehicula. Duis egestas fermentum leo. Nunc eget dapibus eros, id egestas magna. Fusce non arcu non quam laoreet porttitor non non dui. Ut elit nisl, facilisis id hendrerit et, maximus at nunc. Fusce at consequat massa. Curabitur fermentum odio risus, vel egestas ligula rhoncus id. Nam pulvinar mollis consectetur. Aenean dictum ut tellus id fringilla. Maecenas rutrum ultrices leo, sed tincidunt massa tempus ac. Suspendisse potenti. Aenean eu tempus nisl. 
</span>
<br/><br/>
<button id="change_color">Change Selected Text Color</button>

Try this

mark up

<p>
I am using the following code to change the color of text but it is not working.. Can    anyone help me with this? the soloution in javascript or jquery anything is fine..
</p>

Script

<script type="text/javascript" >

   $(document).ready(function(){
       $("p").on("mouseup" , function(){
          selectedtext = selectedText();
          var replceText = "<span style='background:#cccccc' >"+selectedtext+"</span>";
          var gethtmlText = $(this).text();
          var replcedtext = gethtmlText.replace(selectedtext ,  replceText);
         $(this).html(replcedtext)
       });
 });

function selectedText(){
    if(document.getSelection){
      return document.getSelection();
    }
    else if(document.selection){
      return document.selection.createRange().text;
    }
}

</script>

Check DEMO here http://jsfiddle.net/yeyene/GYuBv/7/

Select text, and click button to change selected text color.

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }

        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var mytext = selectHTML();
        // you can modify any css style here...
        $('span').css({"color":"red"});
    });
});

The following code works when you select a text or word, the color will change:

<style>
::selection {
    color:blue;
    background:yellow;
    font-size:14px;
}

::-moz-selection {
    color:blue;
    background:yellow;
    font-size:14px;
}
</style>

I've created a pretty short fiddle that demonstrates the use of jQuery to change the color of a piece of text.

HTML:

<p id="paragraph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium?</p>
<button id="colorChanger">This Button changes the text color of the paragraph.</button>

CSS:

#paragraph {
    color: green;
}

JavaScript:

$('#colorChanger').click(function() {
    $('#paragraph').css('color','black');
});

The code above shows that with any text you can change the color using jQuery's css method. Additionally, I used #paragraph to access the paragraph; however, you can use nth-child through jQuery, you can cycle through the children of a container using a loop and checking for the right one then using the css method from jQuery. These are just a few of the ways to change the color of a piece of text.

本文标签： javascriptHow to change color of the selected text dynamically on click of buttonStack Overflow