0

我有一个顺序 dom 元素节点数组，它们可能有也可能没有内联样式。我最终需要一个对象或数组，其中只有所有节点共有的键和值。需要在 IE8+、chrome 和 FF 中工作。

如果不包含一堆其他东西，我什至无法将一个节点样式放入一个数组中。

我尝试使用 node[x].style 但它似乎返回了很多无关的东西和其他问题。

//g is node array
s=[];
for(k in g)
  {
  if(g.hasOwnProperty(k) && g[k]) s[k]=g[k];
  }
console.log(s);

给了我["font-weight", cssText: "font-weight: bold;", fontWeight: "bold"]很接近但我只想要数组中的 fontWeight: "bold" 。无论如何，这只适用于 chrome。

我目前唯一可行的想法是使用 cssText 并在分号上拆分并在冒号上再次拆分，但这似乎是一种丑陋而缓慢的方法，尤其是当我需要与一堆节点进行比较时对他们的风格做同样的事情。

所以，我希望有人能想出一个简单优雅的解决方案来解决第一段中提出的问题。

4

1 回答 1

1

如果您真的只想要在 HTML 中为对象指定的内联样式，那么您将不得不style按照您的推测处理属性的文本。

该.style属性将向您显示比对象本身指定的样式更多的样式（显示某些样式的默认值），因此您不能使用它。

这是一个函数，它接受 DOM 节点的集合并返回常见样式的映射（内联指定的样式，并且在每个对象上具有相同的属性和值）：

function getCommonStyles(elems) {
    var styles, styleItem, styleCollection = {}, commonStyles = {}, prop, val;
    for (var i = 0; i < elems.length; i++) {
        var styleText = elems[i].getAttribute("style");
        if (styleText) {
            // split into an array of individual style strings
            styles = styleText.split(/\s*;\s*/);
            for (var j = 0; j < styles.length; j++) {
                // split into the two pieces of a style
                styleItem = styles[j].split(/\s*:\s*/);
                // only if we found exactly two pieces should we count this one
                if (styleItem.length === 2) {
                    prop = styleItem[0];
                    val = styleItem[1];
                    // if we already have this style property in our collection
                    if (styleCollection[prop]) {
                        // if same value, then increment the cntr
                        if (styleCollection[prop].value === val) {
                            ++styleCollection[prop].cntr;
                        }
                    } else {
                        // style tag didn't exist so add it
                        var newTag = {};
                        newTag.value = val;
                        newTag.cntr = 1;
                        styleCollection[prop] = newTag;
                    }
                }
            }
        }
    }
    // now go through the styleCollection and put the ones in the common styles
    // that were present for every element
    for (var prop in styleCollection) {
        if (styleCollection[prop].cntr === elems.length) {
            commonStyles[prop] = styleCollection[prop].value;
        }
    }
    return(commonStyles);
}

工作演示：http: //jsfiddle.net/jfriend00/JW7CZ/

于 2013-04-28T05:04:24.983 回答