创建jQuery的VanillaJS等效css方法

Question

我正在尝试创建一个类似jQuery的函数，它可以改变HTMLElement的样式，你可能在某个地方见过它：

$("button").css("color", "red");

这很方便，所以下面是我尝试过的：

function $(selector, parent=document){
return parent.querySelector(selector);
}

因此，上面的代码是从DOM中获取HTMLElement的函数$的代码，这似乎非常有效。

现在，我的下一步是定义$function方法和属性，所以我想要创建的方法是css方法，如前一个示例所示：

$.css = function(style, value){
this[style] = value;
}

现在，在测试css方法后，它不起作用(当然它永远不会起作用，但我只是想为您提供我的问题想法(。我对JavaScript中的面向对象编程了解很多，我对它很熟悉，所以如果你发布任何答案，我都没有问题，我会尽力理解它。我已经尝试了很多来理解jQuery开发人员为创建这个方法所创造的魔力。

你认为最好的方法是什么？那么mixin呢，如果我想要其他函数，而不仅仅是"$"继承这个"；css"方法

Answer 1

要修改样式，需要设置元素的样式声明对象的CSS属性。例如：

elm.style.color = 'red';

您需要修改$.css以访问集合中的当前元素，并访问其.style[propertyName]属性。

您可以将集合放到实例的属性上，并确保将css方法作为类的原型：

function collection (selector, parent = document) {
this.elms = parent.querySelectorAll(selector);
}
collection.prototype.css = function(prop, value) {
for (const elm of this.elms) {
elm.style[prop] = value;
}
}
const $ = (...args) => new collection(...args);
$("button").css("color", "red");

<button>a button</button>
<button>a button</button>

因为$不使用new，所以您需要它返回不同类的实例(如上面的代码中所示(，或者在调用它时始终使用new，或者让$返回通过Object.create创建的实例，或者类似的东西。有各种各样的方法。

Answer 2

不确定这是否是您想要的，但您可以直接内联应用样式吗？

var elem = document.querySelector('#some-element');
//set color to red
elem.style.color = 'red';
//set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';
//set the height to 225px
elem.style.height = '225px';