Question

我正在找到一个tumblr网站，每张图片都包含在“.photobox”类中。有没有一个javascript或jQuery可以用来将CSS中“.photobox”的“border-color”属性改为随机颜色 - 最好是从预定义颜色列表中选择？我在这里找到了一两个脚本，但它们似乎没有用。

Answer 1

自动更改间隔

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]);
});

Answer 2

我不确定，可能通过这个http://plugins.jquery.com/node/11985下载zip并查看文件的源代码。它;表格和颜色是随机的，但我认为我们可以给出固定的颜色代码

Answer 3

Javascript无法更改CSS规则集。您必须声明一个新的CSS规则集并将其分配给DIV或每个图像。像

<script type="text/javascript">
    function changeClass()
    {
        document.getElementById("MyElement").className += " MyClass";
    }
</script>
...
<button onclick="changeClass()">My Button</button>

Answer 4

你去了：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]); 
  }); 
});

Answer 5

根据您的评论，您需要以下内容：

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 )];
    }
}

getElementByClassName已从here复制。

随机边框颜色

5 个答案:

自动更改间隔

一次性随机颜色

单个容器内的许多图像

jQuery解决方案