How to set the css properties with its own data-attributes?

Tags: jquery,css,custom-data-attribute

Problem :

Say I have this little snippet:

<p data-color="red">Hello world</p>

An I want to set its color to its own data-attribute, like this:


    color: $(this).data('color')

For some reason, that doesn't work. Anyone know what I'm doing wrong?

Solution :

this refers to something else, not to the p. Try putting it in a function.

$('p').css('color', function() { return $(this).data('color'); });

    CSS Howto..

    How can I make the menu to wrap when I resize my browser?

    How to uniformly darken colors?

    How to center a text which is placed on an image

    tooltip pointer is showing downwards to the left of the hyper link

    How use Append Jquery

    PHP / CSS How to work with themes for my site? [closed]

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to animate a copy of the div from the current position to the top right

    How to align form using css [closed]

    How to get the root directory of wordpress in css

    How to convert a 'div' into a dropdown using CSS/Jquery

    How to use cross domain dynamically generated CSS

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to create hidden pop out side menu

    How can I instantly stop a CSS animation on hover?

    CSS how to make special div shape

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    How can menu items be displayed from bottom up using CSS

    Basic concept for how javascript replaces an html input with something interactive?

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to change a CSS property dynamically in Angular

    Why my easypie number don't show inside?

    How to write css rule with variable to change font-size?

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    How do I make a line feed in a div tag?

    How to expand a div to its content width WHEN it is larger than its parent?

    How can I center align the list horizontally?

    jQuery - How to adjust CSS filter (blur)?

    Slideshow using background images with navigation and captions