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:

$('p').css({

    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 to resize QR code?

    How to access files from this hierarchy?

    How to get the perticluar image from large set images in one image using css

    How to change parent element css-properties by clicking on his child without javascript

    How do you make this dogeared shape with css only

    CSS how to style a parent item when a textarea is in focus?

    How to override a style of a specific Joomla module?

    How to make a span tag wider with an alphabet inside?

    How to NOT select only specific elements in a table with jQuery?

    jQuery: How to change the size of a css block?

    How can I move all my CSS box shadows back under div

    How to adjust font awesome down arrow via css

    How to keep Fixed position navigation static positioned when resizing window

    How to use dp to calculate shadows - web development HTML CSS

    How can I change the number of columns in the product list?

    How to make pixel perfect font in css?

    How to apply css background color to text only, in datatables cell

    CSS how to vertical align div in a div against a sibling div (inline-block)

    HTML5 (php) with CSS Tooltip shows up far away from hyperlink

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

    How to indent input controls for a nested HTML list using CSS to a single column

    How to include a CSS link if a call isn't done via AJAX?

    CSS how to align vertically center div floating elements of menu?

    how to get value of colors from CSS

    How to add the css properties to an image in ImageResourceCell of CellTable

    How to overlay a play button over a YouTube thumbnail image

    How do I move this scrolling bar closer to the post area?

    How to align multiple images horizontally (in a row)?

    How to select list item by its contents?

    How to inherit height in div?