我怎样才能随意使用jQuery的CSS属性的值？

我想使用jQuery使一个CSS选择器随机在html元素上的值之一。我已经尽可能为所有元素随机化选择器（循环遍历列表边框上的颜色），但是我想同时随机化每个单独的列表元素。我怎样才能随意使用jQuery的CSS属性的值？

道歉，如果这是令人困惑（我对我自己糊涂），但是如果你运行下面的代码几次，你就会明白，看边框的颜色变化。理想情况下，这些边框颜色都会不同。

非常感谢您的帮助。

<html> 
<head> 
    <title>Title</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script> 
    <style> 
    .bars{ 
     border-left-style: solid; 
     border-left-width: 4px; 
     padding-left: 10px; 
    } 

    ul{ 
     list-style-type: none; 
    } 
    </style> 

</head> 
<body> 
     <ul> 
      <li class="bars"> 
       <a>Marathon Men and Women</a> 
      </li> 

      <li class="bars"> 
       <a>Marathon Men and Women</a> 
      </li> 

      <li class="bars"> 
       <a>Marathon Men and Women</a> 
      </li> 

      <li class="bars"> 
       <a>Marathon Men and Women</a> 
      </li> 

      <li class="bars"> 
       <a>Marathon Men and Women</a> 
      </li> 
     </ul> 
</body> 
<script> 
    $(document).ready(function(){ 
     var colors = ["#CCCCCC","#333333","#990099"];     
     var rand = Math.floor(Math.random()*colors.length);   
     $('.bars').css("border-left-color", colors[rand]); 
    }); 
</script>

http://jsfiddle.net/RMR42/

来源

2014-04-12 user3525807

您可以使用jQuery.each（）函数指定个别颜色：http://jsfiddle.net/qaF24/

$(document).ready(function(){ 
    var colors = ["#CCCCCC","#333333","#990099"];     
    $('.bars').each(function() { 
     var rand = Math.floor(Math.random()*colors.length); 
     $(this).css("border-left-color", colors[rand]); 
    }); 
});

来源

2014-04-12 02:56:38

我知道我们应该避免“感谢”的意见，但这是最好的。我以前没有用过，被社区吹走了。非常感谢，其他人也一样。 – user3525807

jQuery选择（” .bars'）的所有选择班级“酒吧”的元素。当然，它将把它们都设置为一样。

我会建议，而不是分配一个id到父元素，然后使用.children()选择器遍历每个<li>并分配一种颜色。

像

<ul id="bars"> 
     <li> 
      <a>Marathon Men and Women</a> 
     </li> 

     <li> 
      <a>Marathon Men and Women</a> 
     </li> 

     <li> 
      <a>Marathon Men and Women</a> 
     </li> 

     <li> 
      <a>Marathon Men and Women</a> 
     </li> 

     <li> 
      <a>Marathon Men and Women</a> 
     </li> 
    </ul> 
<script> 
$(document).ready(function(){ 
    var colors = ["#CCCCCC","#333333","#990099"],rand;     
    var ligroup = $('#bars').children(); 
    for (var i=0,len=ligroup.length;i<len;i++) { 
     rand = Math.floor(Math.random()*colors.length); 
     $(ligroup[i]).css("border-left-color", colors[rand]); 
    } 

}); 
</script>

来源

2014-04-12 02:58:00 serakfalcon

如果有多于一位家长，该怎么办？只有一些孩子？ – bjb568

由于它选择了ID，所以不能有多个父母，但可能有多个孩子级别，因此必须使用其他选择器进行相应调整。迭代通过DOM，因为您的答案更适合作为更一般的情况，但“getElementByClassName”有点慢。 – serakfalcon

但您的答案不适用于所有情况。 – bjb568

http://jsfiddle.net/RMR42/1/

var colors = ["#CCCCCC", "#333333", "#990099"]; 
var bars = document.getElementsByClassName('bars'); 
for (var i = 0; i < bars.length; i++) { 
    bars[i].style.borderLeftColor = colors[Math.floor(Math.random() * colors.length)]; 
}

也许一个香草的解决方案将帮助别人。更快，没有更多的代码。每个李

来源

2014-04-12 02:58:16 bjb568

$(document).ready(function() { 
var bars = document.getElementsByClassName('bars'); 
for (var i = 0; i < bars.length; i++) { 
    bars[i].style.borderLeftColor ="#"+genColor(); 
} 
});

颜色随机发生器：http://jsfiddle.net/RMR42/2/

你，如果你想每一个人是不同的，随机使用某种遍历所有同级元素循环中。

参考：https://gist.github.com/wfreeman/1158409

来源

2014-04-12 03:46:02 Vijay

OP不想要任何颜色，OP定义了颜色。 – bjb568