Geek Answers Handbook

Dynamically change CSS color property when clicked

I have a function that generates random colors, I want to use this function in combination with the jQuery feature toggleClasson click. I want to create a unique color in the cell tablewhen I click and delete the generated color if the user clicks on the color cell again (make it white / colorless again).

HTML table:

   <div id="container">
        <table id="table">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>

        </table>
    </div>

Color Generation Function:

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

Color Assignment to a Cell:

$( function(){
    $('td').click( function(){
            $(this).css('background-color',getRandomColor);
    });
});
0
source share
5 answers

, , 'rgba(0, 0, 0, 0)', (, Chrome, IE). ( background-colour .

jQuery, say toggleRandomColor :

var blankColor = $('body').css('background-color');
$.fn.toggleRandomColor = function () {
    if ($(this).css('background-color') == blankColor) {
        $(this).css('background-color', getRandomColor);
    } else {
        $(this).css('background-color', '');
    }
};

:

$('td').click(function () {
    $(this).toggleRandomColor();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nmav8d3n/4/

+1

, , :

$('td').click( function(){

    var $td = $(this);

    if($td.hasClass('is-colour')) {
        $td.css('background-color','transparent')
            .removeClass('is-colour');
    else {
        $td.css('background-color',getRandomColor())
            .addClass('is-colour');
    }

});
+1

100%, -, , , ?

$( function(){
    var default_background = 'rgba(0, 0, 0, 0)';

    $('td').click( function(){
        var $this = $(this),
            curr_background = $(this).css('background-color');

        if (curr_background === default_background){
            $this.css('background-color',getRandomColor);
        } else {
            $this.css('background-color', default_background);  
        }
    });
});

fadle http://jsfiddle.net/qL10e5xd/

0

, .

function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++ ) {
         color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
 }

$( function(){
    $('td').click( function(){
        if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)') {
            // if background-color isn't set, jQuery returns 'rgba(0, 0, 0, 0)'
            $(this).css('background-color',getRandomColor);
        } else {
            $(this).css('background-color','');
        }
    });
});

http://jsfiddle.net/nmav8d3n/

0

You can use this code

$( function(){
    var clicked = flase;
    $('td').click( function(){
    if(!clicked){
            $(this).css({'background-color',getRandomColor});
            clicked = true;
    }
    else{
            $(this).css({'background-color','white'});
            clicked = false;
        }
    });
});
0
source

More articles:


All Articles