Question

就像jQuery $（selector）一样，我在纯JS中编写自定义函数，问题是我的函数只选择第一个元素。

function selectall(selector) {
  var elements = document.querySelectorAll(selector);
  var i;
  for (i = 0; i < elements.length; i++) {
    return elements[i];
  }
}
selectall("h2").style.color = "blue";

Answer 1

这不自然 - 甚至jQuery只提供方法.css()。

可以使用setter：

执行此操作

function selectall(selector) {
  var elements = document.querySelectorAll(selector);
  var styleProxy = {};
  var cssStyleDeclaration = document.createElement(selector).style;
  for (var prop in cssStyleDeclaration) {
    const PROP = prop;
    Object.defineProperty(styleProxy, PROP, { set: function (value) {
      elements.forEach(function(element) {
        element.style[PROP] = value;
      });
    }});
  }
  return {
    style: styleProxy
  };
}

// Works with most style properties
selectall("h2").style.color = "blue";
selectall("h2").style.fontSize = "10px";

Answer 2

写一些允许你像这样使用语法的东西的方式是这样的：

＆＃13;

// First we need a function that returns an object that has prototype
// linkage to some object with getters and setters for style properties,
// when called as a constructor:
function DOMCollection(selector) {
    this.collection = Array.from(document.querySelectorAll(selector));
}


// We'll need an accessor property called 'style' on DOMCollection.prototype,
// to create a scoped reference to 'this' we can access from nested property
// getters and setters:
Object.defineProperty(DOMCollection.prototype, 'style', {


    get() {
        let _DOMCollection = this;
        
        return {

            // We can create a style object with setters for style properties.
            // This setter iterates the array of found elements, and performs
            // the written statement for each element in the collection:
            set color(value) {
                _DOMCollection.collection.forEach((element) => element.style.color = value);
            }
        };
    }
});

// Next, we will have to create a factory function that instantiates
// a new DOMCollection object from the given selector:
function selectAll(selector) {
    return new DOMCollection(selector);
}


// Now we get back a new DOMCollection whose prototype contains a setter
// for the style.color property. You are now able to use the notation
// written in the question:
selectAll('h2').style.color = 'blue';

＆＃13;

<h2>A heading</h2>
<h2>Another heading</h2>
<h2>Yet another heading</h2>

＆＃13;

请注意，您必须为每个要以此方式变异的样式属性显式编写setter。更清晰的选择是将最终属性（在这种情况下为颜色）赋予样式的函数形式。这基本上是$('h2').css('...')的作用。作为上述defineProperty语句的替代方法，您可以执行以下操作：

/**
 * @param {Object} keyValues
 */
DOMCollection.prototype.style = function(keyValues) {

    // Iterate all keys in given style object:
    Object.keys(keyValues).forEach((key) => {

        let value = keyValues[key];

        // Then for each style, apply it to each element in this.collection:
        this.collection.forEach((element) => {
            element.style[key] = value;
        })

    })
};

现在，您可以编写类似于$.css()的代码，并且可以使用任意数量的样式定义：

selectAll('h2').style({
    color: 'blue',
    fontStyle: 'italic',
    // .. as many as you wish
});

Answer 3

你可以实现这样的目标。

List<Client>

String[] listEmails

你可以写这样的功能

function changeColor(selector,style,value){
  var divs = document.querySelectorAll(selector);
  divs.forEach(function(elem){
    elem.style[style] = value;
  });
}

changeColor("h2","color","blue");
//changeColor("h2","color","red");

或者你可以制作你的。

的数组原型

<h3>test1</h3>
<h2>test2</h2>
<h2>test3</h2>

function changeColor(selector){
  var divs = document.querySelectorAll(selector);
  divs.forEach(function(elem){
    elem.style.color = "blue";
  });
}

changeColor("h2");

纯JavaScript函数选择所有元素

3 个答案: