2

divが四角いボックスのホームページがul li divあり、上部に3x3があります。私のサイトの一番下のセクションはコード生成されたマークアップであり、私は似たようなものを持っています。

各divの「ボックス」に色を付けたいのですが、現在はすべてcssでスタイル設定されています。jqueryでullidivをチェックし、divが存在する場合は、インラインスタイルに異なる色を追加する方法はありますか？スクリプトに色を保存する必要があります。

これは私が始めることができる方法ですか？：

$("div.box").css({"background-color": "color"});

これが私の例のカットダウンマークアップです：

<ul>
<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>About Me</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>

<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>Pane 2</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>

<li data-target="aboutme" data-target-activation="click" style="margin-top:0px" class="tile high me">
          <div>
          <h2>Pane 3</h2>
        <h3></h3>
         <img width="48" height="48" alt="" class="icon" src="images/icons/x.png">
     </div>
</li>
</ul>

これはcssです：

       .tiles {
        height: 95%;
        margin: 0 auto;
        min-height: 950px;
        overflow: visible;
        padding: 10px;
        width: 957px;
    }

    .tile.high {
    float: left;
        height: 200px;
        margin-top: -100px;
        padding-left: 10px;
        width: 23.6%;
    }

    li.tile div {
        background-color: #00ABA9;
    }

    .tile div {
        background-repeat: no-repeat;
        height: 100%;
        margin: 10px 10px 0;
        overflow: hidden;
        width: 100%;

    }
4

2 に答える 2

9

divをループし、それぞれに異なる色を使用します。

// Declare colors you want to use
var myColors = [
    '#f00', '#abc', '#123'
];
var i = 0;
$('div.box').each(function() {
    $(this).css('background-color', myColors[i]);
    i = (i + 1) % myColors.length;
});

オンラインで確認してください：http：//jsfiddle.net/4NVRQ/

于 2012-06-17T08:53:59.053 に答える
1 
var 

color = function(){
    return '#' + Math.floor(Math.random()*16777215).toString(16);
},
$els = $('div.box'),
colorify = function(els){
    els.each(function(){
        $(this).css('backgroundColor', color());
    });
};

colorify($els);
于 2012-06-17T08:53:39.080 に答える