JQuery 类似类的编程快捷方式

Question

我正在写一些javascript和HTML，由于我正在写的东西的性质，我受到启发写了一些快捷函数。我常用

document.getElementById()

和

document.getElementsbyClassName()

我经常通过这些方法访问样式属性，所以我将这个快捷函数写成类似JQuery的样式：

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

假设我有一个 div，id 为 'foo'，并且想将颜色更改为红色：

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

这为我节省了大量代码

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

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

我用 classes 做了类似的事情，但是由于

的性质，我无法访问 HTML 对象的 .style 对象

document.getElementsByClassName()

因为它returns一个字符串。我通常要做的是将项目收集为数组并像这样遍历它：

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

如您所见，使用 class 作为 ID 需要三倍的代码才能达到相同的效果。所以我要问的是：

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

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

所以基本上我想要的是一个函数，它可以完成我的 ID 函数所做的事情，但使用 class，并且无需遍历 class.

免责声明

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

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

Answer 1

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

您可以这样做：

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

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

Answer 2

一个简单的解决方案是：

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'）。

Answer 3

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

JQuery 类似类的编程快捷方式

JQuery-like programming shortcut for classes

html

javascript

css

function

shortcut

免责声明

JQuery 类似 类 的编程快捷方式

JQuery-like programming shortcut for classes

html

javascript

css

function

shortcut

免责声明

JQuery 类似类的编程快捷方式