检测键是否应被视为样式或属性

Question

我有以下功能：

var applyStyling = function (element, object) {
    return _.each(object, function (value, key) {
       // determine whether the key should be treated as an attribute or style 
         if(style)
            element.style.key = value
         element.setAttribute(key, value)
    })
}

一个示例使用类似于

applyStyling('some dom element', {'id' : 'someID', 'zIndex' : 10})

如何检测键是否应被视为样式或属性？我只能找到如何检查 attribute/style 是否已在元素上设置。

Answer 1

var applyStyling = function (element, object) {
    return _.each(object, function (value, key) {
       // determine whether the key should be treated as an attribute or style 
         if(element.hasAttribute(key))
             element.setAttribute(key, value)
         else if (element.style.hasOwnProperty(key))
             element.style[key] = value
    })
}

编辑：根据 OP 评论修改答案

var applyStyling = function (element, object) {
    return _.each(object, function (value, key) {
       // determine whether the key should be treated as an attribute or style 
         if (element.style.hasOwnProperty(key))
             element.style[key] = value
         else
             element.setAttribute(key, value)
    })
}

Answer 2

恐怕没有快速的答案。您可以 list/check 已经定义的属性。但是，您如何 预先列出 DOM 元素上的用户定义属性或浏览器定义的属性（如样式属性）。

您甚至可以为两者使用相同的名称（保留），设置 element.zIndex 和 element.style.id 不会出错。

不错的技巧。 预先列出供您使用和滥用。

Answer 3

var applyStyling = function (element, object) {
  for(var key in object) if(object.hasOwnProperty(key)) {
    if(element.style[key] !== void 0)
      element.style[key] = object[key];
    else
      element.setAttribute(key, object[key]);
  }
}

var applyStyling = function (element, object) {
  for(var key in object) if(object.hasOwnProperty(key)) {
    if(element.style[key] !== void 0)
      element.style[key] = object[key];
    else
      element.setAttribute(key, object[key]);
  }
}
applyStyling(document.documentElement, {
  color: 'red',
  title: 'tooltip'
});

Some text

检测键是否应被视为样式或属性

Detect if a key should be treated as a style or attribute

javascript

css

dom

styling