JQuery - Get css property within selector

Question

I'm trying to set a custom attribute to the target element's CSS property (font-size). How do I access the css from within a selector like:

$('.font-900').attr('data-resfont', <font-size here>);

I tried:

$('.font-900').attr('data-resfont', this.css('font-size'));

I'm guessing this will not work as 'this' refers to the attr function. My next step was:

$('.font-900').attr('data-resfont', this.target.css('font-size'));

This doesn't seem to work either. I think I'm missing something simple.

anazimok · Accepted Answer · 2013-04-01 01:32:35Z

1

There are multiple ways of doing this:

Iterate over every element that matches:

$('.font-900').each(function() {
    $(this).attr('data-resfont', $(this).attr('font-size'))
});

Create a variable assignment:

var e = $('.font-900');
e.css('data-resfont', e.attr('font-size');

Use function to set the attribute

$(".font-900").attr('data-resfont', function () {
   return this.style.fontSize;
});

edited Apr 1, 2013 at 1:32

answered Mar 31, 2013 at 16:28

anazimok

1,7593 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Smith Over a year ago

That's a perfect answer but someone beat you to the solution I was looking for. Its only fair to accept their answer. I'd vote you up if I could!

Explosion Pills Over a year ago

Wjouldn't that be .each instead of .forEach?

Explosion Pills · Accepted Answer · 2013-03-31 16:23:16Z

0

You can use a function as the second argument to .attr which is iterated over each element in the collection (you cannot do this with .data or I would have suggested using that).

$(".font-900").attr('data-resfont', function () {
    return this.style.fontSize;
});

answered Mar 31, 2013 at 16:23

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Collectives™ on Stack Overflow

JQuery - Get css property within selector

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related