我怎樣才能隨意使用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