Databases
StackOverflow2013
Postsdbo
POHow to use the Javascript to add/remove the CSS/colour style to the html page?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use the Javascript to add/remove the CSS/colour style to the html page?
    text
    copied!<p>I have a simple javascript question in the HTML page. </p> <p>In my case, the user can use the mouse to <strong><em>select some text in the paragrahe</em></strong>, e.g. use the mouse to highlight the 'My name is John', and then click the one of the input button, then the <strong><em>selected text</em></strong> will be applied to selected button style to the text (e.g. add the CSS colour and clear the CSS colour).</p> <p>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.</p> <p>There is 1 HTML page and 1 js file. </p> <p>I have the following code in the HTML page:</p> <pre><code>// 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 &lt;p&gt; &lt;input type="button" onclick="colour('red')" value='red'/&gt; &lt;input type="button" onclick="colour('yellow')" value='yellow'/&gt; &lt;input type="button" onclick="colour('green')" value='green'/&gt; &lt;input type="button" onclick="clear_colour()" value='Glear'/&gt; &lt;input type="button" onclick="clear_colour_all()" value='Clear All'/&gt; &lt;/p&gt; // paragrahe &lt;p&gt; My name is John, I live in ABC and I have a car. I like to play TV game. &lt;p&gt; </code></pre> <p>The text.js file</p> <pre><code>//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!!!!!!! } } </code></pre> <p>And I expect the result like after select the text and select 'red' button (assum I have the CSS class is red)</p> <pre><code>// paragrahe &lt;p&gt; &lt;span class="red"&gt;My name is John, &lt;/span&gt; I live in ABC and I have a car. I like to play TV game. &lt;p&gt; </code></pre> <p>if the user select the 'My name is John' and click the 'clear' button, it will return to </p> <pre><code>// paragrahe &lt;p&gt; My name is John, I live in ABC and I have a car. I like to play TV game. &lt;p&gt; </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload