Question

是否可以手动计算元素上的结果css样式（无需渲染）？

让我们说我应该有一个HTML结构：

<p style="some_style1">
  <span style="some_style2">
    <span style="some_style3">
       TEXT
    </span>
  </span>
</p>

我知道JS对象的some_style1，some_style2，some_style3是什么（例如我有每个元素的数据，如：{font: 'Times New Roman' 12px bold; text-align: center;}）

我想手动（无需在浏览器中渲染整个结构）计算会影响“TEXT”的结果样式。

我应该使用什么算法（或解决方案）？

Answer 1

存在不需要在窗口中呈现的浏览器（无头浏览器）。您可以加载页面并查询所需内容。比普通的浏览器更容易获得你所要求的东西。

JSCSSP是一个用跨浏览器JavaScript编写的 CSS解析器，可能是从头开始或完全实现您想要的第一步。给它一个样式表，它会告诉你浏览器会解析什么。你仍然必须管理：

DOM，
样式的继承，
确定哪些规则适用于具有或不具有class，id，attributes，siblings等的给定元素
选择者的优先事项
等

它的作者是D. Glazman，W3C CSS小组的联合主席，Kompozer，NVu和BlueGriffon的开发人员，所以它应按预期解析CSS：）

Answer 2

我能想到的最简单的事情是将整个事物包装在一个你设置display: none的容器中，然后将它附加到DOM。浏览器不会渲染它，但您将能够查询计算出的样式。

这是一个示例，显示当结构未连接到DOM时jQuery如何找不到样式信息，但是当它结束时，它可以：

jQuery(function($) {

  // Disconnected structure
  var x = $("<p style='color: red'><span style='padding: 2em'><span style='background-color: white'>TEXT</span></span></p>");

  // Get the span
  var y = x.find("span span");

  // Show its computed color; will be blank
  display("y.css('color'): " + y.css('color'));

  // Create a hidden div and append the structure
  var d = $("<div>");
  d.hide();
  d.append(x);
  d.appendTo(document.body);

  // Show the computed color now; show red
  display("y.css('color'): " + y.css('color'));

  // Detach it again
  d.detach();

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
});

Live copy | source

我无法保证所有价值观都是完全正确的，你必须尝试并看到;浏览器可能推迟计算某些内容，直到/除非容器可见。如果您发现某些属性尚未计算，则可能必须使div可见，但页外（position: absolute; left: -10000px）;

Answer 3

我在Stackoverflow上发现了一些关于此的文章：Can jQuery get all styles applied to an element。

此问题还出现在quirksmode：Get Styles上，显示以下函数：

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

这允许您查询样式属性

Answer 4

样式按照定义顺序相互覆盖：因此some_style3中覆盖some_style2中相同选择器的任何内容都可以。否则，它只是一组选择器的联合。

编辑有些选择器不会覆盖，而是相对于之前的定义行事，所以你必须小心。

是否可以手动计算（计算）生成的css样式？

4 个答案: