声明

Question

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

document.getElementById()

和

document.getElementsbyClassName()

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

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

假设我有一个带有id＆＃39; foo＆＃39;的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

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

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

类{J}类编程快捷方式

声明

2 个答案: