javascript - 指示 html 对象的各种属性

Question

我要设置 html 对象的属性。

var property1 = 'style.visibility';
var property2 = 'style.display';
var property3 = 'style';

我尝试了以下事情。

首先；

1;  object[property1] = 'visible';
2;  object[property2] = 'block';
3;  object[property3].display = 'none';

第二个；

1;  object.property1 = 'visible';
2;  object.property2 = 'block';
3;  object.property3.display = 'none'; 

在我的例子中，只有 first;3; 运行良好。
有什么方法可以很方便的表示html对象的属性吗？

Answer 1

您可以使用 reduce() 创建函数来访问嵌套属性。

var property1 = 'style.visibility';
var property2 = 'style.display';
var property3 = 'style';

var obj = {style: {visibility: 1, display: 2}}

function getProp(prop, obj) {
  return prop.split('.').reduce(function(r, e) {
    return r[e]
  }, obj)
}

console.log(getProp(property1, obj))
console.log(getProp(property2, obj))
console.log(getProp(property3, obj))