我最近为JavaScript创建了一个自定义框架,但是我的'.css()'函数无法用作对象符号,这是我的代码的一部分:
const aps = function(selector) {
if (!(this instanceof aps)) {
return new aps(selector);
};
this.el = document.querySelectorAll(selector);
var about = {
Version: "0.3",
Author: "AppleProSchool, Adam Izgin",
Created: "Fall 2018, Tuesday 5, November",
Updated: "Tuesday 6, November",
}
};
aps.prototype.css = function(property, value) {
this.el.forEach(function(element) {
element.style[property] = value;
});
return this;
};
例如,如果我愿意这样做:
(window.onload = function() {
aps('.test').css({ background: '#0f0' });//That does not return anything. Why?
});
但是当我这样做时:
(window.onload = function() {
aps('.test').css('background', '#0f0');//It works.
});
我确实有一个红色背景的div。
任何想法为何?还是谢谢你。
答案 0 :(得分:1)
您的函数需要两个参数:
aps.prototype.css = function(property, value) {
因此,当您向其发送一个参数(一个对象)时:
aps('.test').css({ background: '#0f0' })
property
参数包含{background:'#0f0'}
,它将无法正确提取:
element.style[property]
,该函数找不到value
所需的信息,因此将为undefined
。
但是,当您发送两个参数时:
aps('.test').css('background', '#0f0')
有效。
如果要使用Object语法,则需要更新函数以期望只有一个参数,并且该函数将必须从该对象“解压缩”所需的数据。看起来像这样:
aps.prototype.css = function(obj) {
this.el.forEach(function(element) {
// Use the first key name in the object and the first key value
element.style[Object.keys(obj)[0]] = Object.values(obj)[0];
});
return this;
};