Question

我有一个名为main的div：

 <div id="main">

我也有一个颜色的div：

 <div id="colors">

在div颜色中，我有一个颜色列表：示例

红色

蓝色

黄

如果我点击1种颜色，我想改变div main的颜色。

我已经拥有：

$("#main").hover(function() 
{ 
    $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
}
    ,function() {
    $(this).stop().animate({ backgroundColor: "#8D8D86" }, 800); 
});

这改变了我想要的颜色。

但是我希望这个效果适用于div中的颜色。

因此，如果我点击黄色，颜色必须不是＃a7bf51但是如果我点击黄色它必须是黄色，如果我点击红色它必须是红色。

我也试过

 <a  href="#top" class="testClick" onclick="
                document.getElementById('#bord').style.backgroundColor='#350000';
            ">Rood </a>

将背景图像变为＃350000

但是我希望有一个包含20多种颜色的大清单，所以如果我可以创建一个函数会更好，而且使用该函数我也会产生一个很好的动画效果。

那么有人可以用正确的方式帮助我改变背景颜色吗？

Answer 1

var color = '';
$('div').click(function() {
    var clr = $(this).css('backgroundColor');
    var color= hexc(clr);


$(this).animate({ backgroundColor: color }, 'fast');

})

希望它有效..

Answer 2

试试这个

<强> HTML

<div id="colors"> 
  <span id="#a7bf51">red</span>
  <span id="#8D8D86">green</span>
  ........
</div>

<强> jquery的

$('#colors span').click(function(){
     var color=$(this).attr('id');
     $('#main').stop().animate({ backgroundColor: color }, 800);
});

Answer 3

试试这个：

$('#colors p').click(function(){

    color = $(this).innerHTML;

    $('#bord').stop().animate({
        backgroundColor: color
    }, 800);

}

这假设您的'colors'div充满了包含颜色的p元素

它还假定您的文本颜色是有效的HTML颜色名称。

http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color

Answer 4

<强> HTML

<div id="main">
    Some content
</div>

<div id="colors">
   <p>Red</p>
   <p>Blue</p>
   <p>Yellow</p>
</div>

<强> Jquery的

 $(document).ready(function() {
        $('#colors p').on('click',function(){
            var color = $(this).text();
            $('#main').stop().animate({ backgroundColor: color }, 800);
        });
    });

改变背景的颜色

4 个答案: