1

是否可以手动计算元素上的结果 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;}：）

我想手动（无需在浏览器中呈现整个结构）计算将影响“文本”的结果样式。

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

4

4 回答 4

1

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

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

  • DOM，
  • 风格传承，
  • 确定哪些规则适用于具有或不具有类、id、属性、兄弟姐妹等的给定元素
  • 选择器的优先级
  • ETC

它的作者是 D. Glazman，他是 W3C CSS 小组的联合主席，也是 Kompozer、NVu 和 BlueGriffon 的开发者，因此它应该能够按预期解析 CSS :)

于 2012-06-20T12:29:14.943 回答
0

我能想到的最简单的事情是将整个内容包装在您设置display: none的容器中，并将其附加到 DOM。浏览器不会呈现它，但您将能够查询计算的样式。

下面是一个例子，展示了当结构没有连接到 DOM 时，jQuery 如何找不到样式信息，但是当它连接到 DOM 时，它可以：

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);
  }
});

现场复制| 来源

我不能保证所有值都完全正确，您必须尝试一下；浏览器可能会推迟计算某些东西，直到/除非容器可见。如果你发现一些你想要的属性还没有计算出来，你可能不得不把div可见的，但离页的（position: absolute; left: -10000px）；

于 2012-06-20T12:03:36.797 回答
0

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

这也是关于 quirksmode 的：获取显示以下功能的样式：

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;
}

这允许您查询样式属性

于 2012-06-20T12:07:04.877 回答
0

样式按照它们定义的顺序相互覆盖：所以任何some_style3覆盖相同选择器的东西some_style2，比如说，都可以。否则，它将只是选择器集的并集。

编辑一些选择器不会覆盖，而是相对于先前的定义采取行动，所以你必须小心这一点。

于 2012-06-20T12:13:05.513 回答