如何仅通过提供元素的 id 来获取元素的所有应用样式？

IT技术 javascript html css
2021-03-03 18:29:42

我试图编写一个函数，它接受元素的 Id 并给出应用于该元素的所有样式属性（及其值）的列表。它应该考虑内联样式以及 css 文件中定义的样式。

当我在参数中提供样式属性名称和元素的 id 时，我可以使函数工作，但我只想传递元素的 id，并且应该能够获取所有样式属性和值。

功能应该是这样的 getStyleById(elementId);

PFB 到目前为止的代码片段：

var styleNode = [];
var styles;
var sty = x.style;
    
var len = sty.length;
    
for (var i = 0; i < len; i++) 
{
    styles = sty.item(i);
       
    if (x.currentStyle)     //IE for External/Global Styles
    {
        var a = x.currentStyle[styles];
            
        styleNode.push(styles + ":" + a);
    }
    else if (document.defaultView && document.defaultView.getComputedStyle)    //Firefox,Chrome,Safari for External/Global Styles
    {
        var b = document.defaultView.getComputedStyle(x, "").getPropertyValue(styles);
          
        styleNode.push(styles + ":" + b);
    }
    else           //Works in Inline Styles only
    {
        var c = x.style[styles];
          
        styleNode.push(styles + ":" + c);
    }
}
2个回答

使用以下方法：

  • 遍历CSSStyleDeclaration对象的索引( getComputedStyle ) 以获取每个已知的属性名称。使用getPropertyValue+ 这个名称来获取值。
    代码优化：不getComputedStyle用于每次迭代，而是将其存储在循环外的变量中。
  • 使用普通for ( name in object )循环 for currentStyle。
  • 对内联样式使用相同的循环方法

代码：

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}
这段代码太棒了！有没有办法只获取样式表或特定样式表应用的样式？类似于 chrome 的开发者工具 css 样式细分。
2021-04-19 18:29:42
@manishekhawat你想只得到内嵌样式（没有样式表样式）？那么你应该只使用else块中的代码：function getAllStyles(elem){if(!elem)return [];for(var styleNode=[],style=elem.style,i=0;i<style.length;i++)styleNode.push(style[i]+':'+style.getPropertyValue(style[i]));return styleNode}。
2021-04-28 18:29:42
非常感谢:) ...效果很好...但唯一的问题是我只为元素提供了 2 个 CSS 样式属性，而此函数返回的值包含许多 CSS 属性。就像在这个元素 <p id="firstId" style="background-color:#aaaccc; color:red;">FirstId</p> 中一样，而函数的返回值包含 .......... ......................................背景附件：滚动，背景剪辑：边框框，背景颜色：RGB（170, 172, 204），背景图像：无，背景原点：填充框等......
2021-04-30 18:29:42
最后一行代码中有错误：style[style[i]] 将返回“undefined”，因为 style[i] 返回“background-image”但它必须是“backgroundImage”！
2021-05-09 18:29:42
循环遍历所有样式表并使用matches/matchesSelector 测试每个选择器。实现是重要的，值得一个自己的问题。特别是如果你想知道哪种风格是活跃的。
2021-05-14 18:29:42

要获得应用的样式：使用document.querySelector('#notion-app').getAttribute('style').
这将作为字符串返回："width: 1280px; max-width: 1280px; align-self: center; margin-top: 1px; margin-bottom: 1px;"。
您可以使用 将其进一步分解为数组.split(';')。

获取计算样式（最终应用的样式）：
window.getComputedStyle(document.querySelector('#notion-app'))).cssText

不完全清楚我是否可以将它应用于具有 id 的特定元素。
2021-05-03 18:29:42
其它你可能感兴趣的问题
上一篇YouTube 视频结束时的事件 下一篇无法从 Chrome 64 中的本地 css 文件访问 cssRules