javascript - 类似 JQuery 的类编程快捷方式

Question

我正在编写一些 javascript 和 HTML，并且由于我正在编写的内容的性质，我受到启发来编写一些快捷函数。我常用

document.getElementById()

和

document.getElementsbyClassName()

我经常通过这些方法访问样式属性，所以我用类 JQuery 的样式编写了这个快捷函数:

var $=function(elemId){
    return(document.getElementById(elemId).style);
} 

假设我有一个 ID 为“foo”的 div，并且想将颜色更改为红色:

$('foo').color='red';

这为我节省了大量代码

document.getElementById('foo').style.color='red';

尤其是当我在脚本中使用它五十多次时。

我用类做了类似的事情，但是由于性质原因我无法访问HTML对象的.style对象

document.getElementsByClassName()

因为它返回一个字符串。我通常要做的是将元素收集为数组并像这样遍历它:

var x=document.getElementsByClassName('class');
for(i=0; i<x.length; i++){
x[i].style.color='red';
}

如您所见，用类作为 ID 实现相同的效果需要三倍的代码。所以我要问的是:

有没有一种方法可以让我编写一个类似于顶部的函数，但适用于类，这样我就不必遍历它了？理想的结果是

var css=function(classname){
//code here
}
css('class').color='red';

所以基本上我想要的是一个函数，它可以执行我的 ID 函数所做的事情，但需要一个类，而不必遍历该类。

免责声明

我不想要涉及 JQuery 的答案。我无法使用它，这就是我自己以这种方式编写代码的原因。请仅回答常规 JavaScript。

如果您有任何问题，请发表评论，我会尽力澄清。谢谢!

Answer 1

不是按照您制定的方式。问题是当您使用“=”时，无法通知数组发生变化。即使是 jQuery 也不会这样做。

你可以这样做:

css('class').set('color', 'red');

您的函数随后只需遍历数组并设置每个元素的属性。