javascript - 使用 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'});