如何使用自己的数据属性设置CSS属性？

问题描述：

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

的我想它的颜色设置为自己的数据属性，像这样：

$('p').css({ 

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

出于某种原因，不能正常工作。任何人都知道我在做什么错了？

'$（本）'不是'P-> this'，因此不会在里面ARG工作。 –

@Vega - 有没有办法到达$（“p”）？ – Kriem

看到丹尼尔的答案，这似乎是唯一的方法。 http://stackoverflow.com/a/10589446/297641 –

答

this指的是别的东西，而不是p。尝试把它放在一个函数中。

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

如果我想使用对象字面值设置一大堆css属性会怎么样？ – Kriem

你可以使用'map'。 –

@Kriem或'each'。 –

答

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

答

你可以设置CSS属性以避免循环前在对象整个数据存储。喜欢的东西：

var $p = $('p'), 
    data = $p.data(); 

$p.css({ 
    color: data.color, 
    fontSize: data.fontSize 
});

可爱。我喜欢它的整洁。这对创建一个插件来说很有用，它可以按照我的需要使用数据属性。 – Kriem