How do I reset CSS with jQuery?

Question

I want to be able to create a input field where you can enter CSS and have that input value and only that input value be applied to the page.

You can apply any amount of input values to the page and each time it will reset the previous.

Here is what i tried, and it works except for the part where i'm trying to reset the css so i've commented that line out (.remove).

$('input').on('change', function(){

//$('style')[1].remove();
var input = $('input').val();

 var style = $('<style>span'+ input +'{background:yellow }</style>')
$('html > head').append(style);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value=":nth-child(3)">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>

Instead of injecting a <style> element, why not try DOM traversal and the .css() method? — Terry
– Terry, Commented May 3, 2015 at 7:14
Is there a reason you want to do it this way and not as Mr. Terry is suggesting. because it would be much easier. — Prakhar Thakur
– Prakhar Thakur, Commented May 3, 2015 at 7:29
No reason other than, I wasn't sure which way was the best. I tried @Terry's way and it worked out quite well. If anyone cares, first one to make a working snippet i'll make the answer - otherwise I already created a working example based off of Terry's suggestion, thank you. — sjmartin
– sjmartin, Commented May 3, 2015 at 7:41

Ifeanyi Chukwu · Accepted Answer · 2015-05-03 08:00:39Z

Try snippet below. I wrapped the span in a DIV in my sample snippet because the stackoverflow snippet editor has extra span in its content which adds more extra empty span elements before span 1.

working code for your example is simply:

$(function(){

   $('input').on('keyup blur',function(){
      $('span').css('background','none');
      var input = $('input').val();
      var elm = $('span' + input);
      elm.css('background','yellow');

   });

})

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>

All i had to do to reset the css was to set background to none on initialisation. goodluck

$(function(){
  
   $('input').on('keyup blur',function(){
      $('.contain span').css('background','none');
      var input = $('input').val();
      var elm = $('.contain span' + input);
      elm.css('background','yellow');

   });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value=":nth-child(3)">
<div class="contain">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>  
</div>

Axel Amthor · Accepted Answer · 2015-05-03 07:32:43Z

0

Give the style an id:

$('input').on('change', function(){
   var input = $('input').val();
   $("#s1").remove();
   var style = $('<style id="s1">span'+ input +'{background:yellow }</style>');
   $('html > head').append(style);
})

fiddle here

edited May 3, 2015 at 7:32

answered May 3, 2015 at 7:22

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

Collectives™ on Stack Overflow

How do I reset CSS with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related