类的类 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');

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

Answer 2

不，没有办法避免 for 循环。

Answer 3

一个简单的解决方案是：

var css = function(classname, style) {
  var x = document.getElementsByClassName(classname);
  for(i = 0; i < x.length; i++){
    for(var s in style) {
      if(style.hasOwnProperty(s)) {
        x[i].style[s] = style[s];
      }
    }
  }
}

然后：

css('class', { color: 'red' });

当然，属性应该匹配 dom 样式属性（'backgroundColor' 而不是 'background-color'）。