如何使用Javascript添加/删除CSS /颜色样式到html页面？ [英] How to use the Javascript to add/remove the CSS/colour style to the html page?

问题描述

我在HTML网页中有一个简单的JavaScript问题。

I have a simple javascript question in the HTML page.

在我的例子中，用户可以使用鼠标 选择paragrahe 使用鼠标突出显示我的名字是约翰，然后点击其中一个输入按钮，然后 所选文字 将应用于所选按钮样式

In my case, the user can use the mouse to select some text in the paragrahe, e.g. use the mouse to highlight the 'My name is John', and then click the one of the input button, then the selected text will be applied to selected button style to the text (e.g. add the CSS colour and clear the CSS colour).

例如，如果我使用鼠标突出显示我的名字是John，然后单击红色按钮，我的名字是约翰的文本将变为红色。

For example, if I use the mouse to highlight the 'My name is John', and click 'red' button, the text of 'My name is John' will become red.

有1个HTML页面和1个js文件。

There is 1 HTML page and 1 js file.

我在HTML页面中有以下代码：

I have the following code in the HTML page:

// text.html
// 3 input buttons with red, yellow and green colour
// 1 input button to clear the selected CSS colour
// 1 input button to clear all the selected CSS colour
<p>
<input type="button" onclick="colour('red')" value='red'/>
<input type="button" onclick="colour('yellow')" value='yellow'/>
<input type="button" onclick="colour('green')" value='green'/>
<input type="button" onclick="clear_colour()" value='Glear'/>
<input type="button" onclick="clear_colour_all()" value='Clear All'/>
</p>

// paragrahe
<p>
My name is John, 
I live in ABC and I have a car. 
I like to play TV game.
<p>

text.js文件

//text.js
function colour(colour) {
var selection= window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        if (selectedText != '') {
                        // I don't know how to do in here!!!!!!!
        }
}

function clear_colour() {
    var selection= window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            if (selectedText != '') {
                            // I don't know how to do in here!!!!!!!
                            // I just find the following code
                            // var selection= window.getSelection().getRangeAt(0);
                //var selectedText = selection.extractContents();
            }
}

function clear_colour_all() {
    var selection= window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            if (selectedText != '') {
                            // I don't know how to do in here!!!!!!!
            }
}

我希望结果像选择文本和选择红色按钮（假设我的CSS类是红色的）

And I expect the result like after select the text and select 'red' button (assum I have the CSS class is red)

// paragrahe
<p>
<span class="red">My name is John, </span>
I live in ABC and I have a car. 
I like to play TV game.
<p>

如果用户选择我的名字是John并点击清除返回

if the user select the 'My name is John' and click the 'clear' button, it will return to

// paragrahe
<p>
My name is John,
I live in ABC and I have a car. 
I like to play TV game.
<p>

PS由于某些原因，我不想使用jQuery或其他库所以，但是欢迎给出使用jQuery的答案。非常感谢。

P.S Due to some reasons, I don't want to use the jQuery or some other library to do so, but it is welcome to give the answer to use the jQuery. Thank you very much.

推荐答案

这将使用 span> 节点。我想你需要改变 getSelection（）方法为了使它在IE中工作，但它的工作原理是FF：

This will do the trick to wrap the selected text with a <span> node. I think you will need to change the getSelection() method in order to make it work in IE, but it works in FF:

function colour(colour) {
  var selection= window.getSelection();
  if (selection.toString()!=="") {
    var range = selection.getRangeAt(0);
    var span = document.createElement("span");
    span.className = colour;
    span.innerHTML = range.toString();
    range.deleteContents();
    range.insertNode(span);
  }
}

编辑：另外两个函数：

function clear_colour() {
  var selection=  window.getSelection();
  if (selection.toString()!=="" && 
      selection.anchorNode.parentNode.nodeName==="SPAN") {
    selection.anchorNode.parentNode.className="";
 }
}

function clear_colour_all() {
  var selection= document.getElementById('content');
  var spans = selection.getElementsByTagName("span");
  for(var i=0;i<spans.length;i++){
  spans[i].className="";
  }
}

它有一些奇怪的行为，取决于你如何选择文本，但现在你有一些工作;）

It have some weird behavior depending on how you select the text, but now you have something to work with ;)

这篇关于如何使用Javascript添加/删除CSS /颜色样式到html页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！