JQuery - 在选择器中获取css属性

Question

我正在尝试将自定义属性设置为目标元素的CSS属性（font-size）。如何从选择器中访问css，如：

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

我试过了：

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

我猜这不会起作用，因为'this'指的是attr函数。我的下一步是：

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

这似乎也不起作用。我想我错过了一些简单的事情。

Answer 1

有多种方法可以做到这一点：

• 迭代匹配的每个元素：

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

• 创建变量赋值：

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

• 使用功能设置属性

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

Answer 2

你可以使用一个函数作为.attr的第二个参数，它在集合中的每个元素上进行迭代（你不能用.data执行此操作，或者我建议使用它。）

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