Question

我有一系列连续的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：数组中的“粗体”。无论如何，这只适用于chrome。

我目前唯一可能有用的想法是使用cssText并在分号上拆分并再次在冒号上拆分但这似乎是一种丑陋而缓慢的方法，特别是因为我需要比较一堆节点并对它们的样式做同样的事情。

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

Answer 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/

如何在内联样式中找到常见的？

1 个答案: