1

私は tumblr サイトのテーマを設定している最中で、投稿された各画像は「.photobox」クラスに含まれています。CSSの「.photobox」の「border-color」属性をランダムな色に変更するために使用できるjavascriptまたはjQueryの一部はありますか?事前に定義された色のリストから選択することが望ましいですか? ここで 1 つまたは 2 つのスクリプトを見つけましたが、動作していないようです。

4

5 に答える 5

5

自動変更間隔

setInterval(function(){

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get a reference to <div id="mybox"></div>
  var myBox  = document.getElementById("mybox");
  // get a random color from list
  var rand   = Math.floor(Math.random()*colors.length);
  // set random color as borderColor
  myBox.style.borderColor = colors[rand];

}, 500); // run twice a second

ワンタイムランダムカラー

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get a reference to <div id="mybox"></div>
  var myBox  = document.getElementById("mybox");
  // get a random color from list
  var rand   = Math.floor(Math.random()*colors.length);
  // set random color as borderColor
  myBox.style.borderColor = colors[rand];

単一のコンテナー内の多数のイメージ

  // define our colors
  var colors = ["#CCCCCC","#333333","#990099"];
  // get all of our images within a specified container element
  var images = document.getElementById("container").getElementsByTagName("img");
  // loop through each
  for (var i = 0; i < images.length; i++) {
    // get a random color from list
    var rand   = Math.floor(Math.random()*colors.length);
    // apply random color to current image
    images[i].style.borderColor = colors[rand];
  }

jQuery ソリューション

$(".photobox").each(function(){
  var colors = ["#CCCCCC","#333333","#990099"];
  var rand = Math.floor(Math.random()*colors.length);
  $(this).css("borderColor", colors[rand]);
});
于 2010-01-03T17:39:03.763 に答える
0

コメントに基づいて、次のようなものが必要です。

function getElementsByClassName ( classname, node ) {
    if ( !node ) {
        node = document.getElementsByTagName ( "body" )[0];
    }

    var a = [];
    var re = new RegExp ( '\\b' + classname + '\\b' );
    var els = node.getElementsByTagName ( "*" );
    for ( var i = 0, j = els.length; i < j; i++ ) {
        if ( re.test ( els[i].className ) ) {
            a.push ( els[i] );
        }
    }

    return a;
}

var photoboxes = getElementsByClassName ( 'photobox' );
var colors = Array ( 'red', 'blue', 'green', 'pink' );
for ( var i = 0; i < photoboxes.length; i++ ) {
    var images = photoboxes[i].getElementsByTagName ( 'img' );

    for ( var j = 0; j < images.length; j++ ) {
        images[j].style.borderColor = colors[Math.floor ( Math.random () * colors.length )];
    }
}

はheregetElementByClassNameからコピーされました。

于 2010-01-03T17:50:23.267 に答える
0

よくわかりませんが、このhttp://plugins.jquery.com/node/11985 zip をダウンロードして、ファイルのソース コードを参照することで可能になる可能性があります。これはテーブル用で、色はランダムですが、固定の色コードを与えることができると思います

于 2010-01-03T17:34:58.000 に答える
0

Javascript は CSS ルールセットを変更できません。新しい CSS ルールセットを宣言し、それを DIV または各画像に割り当てる必要があります。お気に入り

<script type="text/javascript">
    関数 changeClass()
    {
        document.getElementById("MyElement").className += "MyClass";
    }
</script>
...
<button onclick="changeClass()">マイ ボタン</button>
于 2010-01-03T17:36:23.113 に答える
0

どうぞ: http://jsbin.com/afadu

$(function(){ 
  var colors = ['#ff6','#6ff','#f6f','#f66','#66f','#6f6']; 
  $('input').click(function(){ 
      var randomcolor=Math.floor(Math.random()*colors.length); 
      //alert(randomcolor); 
      $('body').css('color',colors[randomcolor]); 
  }); 
});
于 2010-01-03T17:39:52.633 に答える