5

次のコードを使用してテキストの色を変更していますが、機能していません..誰か助けてもらえますか? javascriptまたはjqueryでの解決策は何でも結構です..

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

5 に答える 5

16 

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>

于 2013-06-25T04:15:07.860 に答える
1

ここでデモをチェックしてくださいhttp://jsfiddle.net/yeyene/GYuBv/7/

テキストを選択し、 ボタンをクリックして、選択したテキストの色を変更します。

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"});
    });
});
于 2013-06-25T04:29:42.333 に答える
1

これを試して

マークアップ

<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 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>
于 2013-06-25T04:43:22.600 に答える
0

jQuery を使用してテキストの色を変更する方法を示す非常に短いフィドルを作成しました。

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

上記のコードは、jQuery の css メソッドを使用して任意のテキストの色を変更できることを示しています。さらに、以前#paragraphは段落にアクセスしていました。ただし、jQuery を介して nth-child を使用できます。ループを使用してコンテナの子を循環させ、適切なものをチェックしてから、jQuery の css メソッドを使用できます。これらは、テキストの色を変更する方法のほんの一部です。

于 2013-06-25T05:14:57.310 に答える