How do I get the color attribute of the returned div?


Tags: javascript,jquery,html,css

Problem :

I have an HTML div like below

<div class="some-class">
        <div class="color-rect"></div>
        <div class="color-rect"></div>
        <div class="color-rect"></div>
</div>

And a corresponding CSS for the same as below

.color-rect {
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 20px;
    margin: 20px;
    position: relative;
    float: left;
}

Now I want to fetch the color of the div on click (which is red by default), with the following code,

$(".color-rect").click(function(e){
        e.target.attr("background-color");
    });

This doesn't work. After I put in the debugger I see that e.target just gives me the div with none of the CSS attributes. How do I get the color of the clicked div?



Solution :

Use jquery object $(this) to select the element you click and then use jquery method .css() to get any property that you need.

$(".color-rect").click(function(e){
    //e.target.attr("background-color");
    console.log($(this).css("background-color"));
});

Here is a complete fiddle for demonstration. JS Fiddle demonstration


    CSS Howto..

    CSS - How to center a div relative to a background image positioned as cover

    How does css scale transform affect document flow?

    How to set CSS rule for a LI in a UL nested in DIV with class?

    How to make background image with aspect ratio in html and css [closed]

    How do you prevent buttons from merging into each other with the .btn-group class in bootstrap?

    How to not inherit CSS styles from parents? [duplicate]

    How to take an element over to given padding with CSS

    How to set the universal CSS selector with JavaScript?

    Button element styled with CSS is not showing the background-image in IE6

    How can I add read more click event to only open one news article?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to make sure Text always stays on top of Image (even when resizing)?

    How to add html special character (right-arrow) using content property of css? [duplicate]

    How to emulate window title bar in CSS/HTML

    CSS question how to make one div appear over another?

    How to realize a gradient like this with css

    How to “reset” style in view page, set in css file

    How simple CSS breadcrumbs work

    How to fit content of a DIV with fixed height

    How do I assign an external CSS file to a javascript-constructed SVG object?

    OOCSS & BEM - inline list - How to handle scaffolding, how to add skin?

    How to avoid orphaned headings in CSS columns?

    CSS how to center ::after pseudo elem

    How to make full window canvas in GWT?

    How to Get Element From Path Not Class or Id

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How can I refactor some repetitive HTML and CSS?

    How to align an image inside a DIV without adding new classes using CSS