javascript - 如何使用jQuery重置CSS？

我希望能够创建一个输入字段，您可以在其中输入CSS并具有该输入值，并且仅将该输入值应用于页面。

您可以将任意数量的输入值应用于页面，并且每次它将重置上一个页面时。

这是我尝试过的方法，除了我试图重设CSS的那部分以外，它都有效，因此我已将该行注释掉（.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>

最佳答案

请尝试下面的代码段。我在我的示例代码段中将范围包裹在DIV中，因为stackoverflow代码段编辑器的内容具有额外的范围，从而在范围1之前添加了更多额外的空范围元素。

您的示例的工作代码很简单：

$(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>

我要重置CSS所需要做的就是在初始化时将背景设置为无。祝好运

$(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>

关于javascript - 如何使用jQuery重置CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30011169/