使用PrototypeJS添加CSS样式

Question

我有一个div我希望使用PrototypeJS添加新样式。但是以下脚本不起作用。这有什么问题？

<div class='exercise-main'>
</div>

$$('.exercise-main').setStyle({
    backgroundColor: '#900',
    fontSize: '12px'
});

Answer 1

$$函数返回所有匹配元素（如果有）的数组。 setStyle是元素方法，而不是数组方法。

这里有一些选择。

如果您只想要匹配一个元素，那么这将有效。

$$('.exercise-main')[0].setStyle({color:'red'});

如果要在每个匹配的元素上设置样式，则其中任何一个都可以。它们基本相同。

$$('.exercise-main').each(function(element) {
    element.setStyle({color: 'red'});
});

或

$$('.exercise-main').invoke('setStyle', {color:'red'});

当然，如果您的元素具有id，则可以使用$函数来查找该元素。这与$$的不同之处在于，您不传递选择器字符串，而只传递id的字符串（即没有'＃'）。此外，这只返回元素或null - 而不是数组 - 因此您可以直接使用返回值中的元素方法，类似于您最初尝试的方法。

$('myElementId').setStyle({color:'red'});