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

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

假设我应该有一个HTML结构：

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

正文

我知道JS对象中的一些样式1、一些样式2、一些样式3是什么（例如，我有每个元素的数据，如：

{font:'Times New Roman'12px bold；text align:center；}

）

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

---

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

我能想到的最简单的方法是将整个内容包装在一个容器中，并将其设置为“显示：无”，然后将其附加到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);
  }
});

jQuery（函数（$）{
//断开结构
var x=$（“
TEXT
”；
//获得跨度
变量y=x.find（“跨度”）；
//显示其计算颜色；将为空
显示（“y.css（'color'）：“+y.css（'color'））；
//创建一个隐藏的div并附加结构
变量d=$（“”）；
d、 隐藏（）；
d、 附加（x）；
d、 附录（文件正文）；
//现在显示计算的颜色；显示红色
显示（“y.css（'color'）：“+y.css（'color'））；
//再把它拆开
d、 分离（）；
功能显示（msg）{
$（“”）.html（字符串（msg））.appendTo（document.body）；
}
});

|

---

我不能保证所有的值都是正确的，你必须试试看；浏览器可能会推迟计算某些内容，直到/除非容器可见。如果您发现您想要的某些属性尚未计算，则可能必须使

div

可见，但不在页面上（

位置：绝对；左：-10000px

）

我能想到的最简单的方法是将整个内容包装在一个容器中，然后将其附加到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);
  }
});

jQuery（函数（$）{
//断开结构
var x=$（“
TEXT
”；
//获得跨度
变量y=x.find（“跨度”）；
//显示其计算颜色；将为空
显示（“y.css（'color'）：“+y.css（'color'））；
//创建一个隐藏的div并附加结构
变量d=$（“”）；
d、 隐藏（）；
d、 附加（x）；
d、 附录（文件正文）；
//现在显示计算的颜色；显示红色
显示（“y.css（'color'）：“+y.css（'color'））；
//再把它拆开
d、 分离（）；
功能显示（msg）{
$（“”）.html（字符串（msg））.appendTo（document.body）；
}
});

|

---

我不能保证所有的值都是正确的，你必须试试看；浏览器可能会推迟计算某些内容，直到/除非容器可见。如果您发现您想要的某些属性尚未计算，则可能必须使

div

可见，但不在页面上（

位置：绝对；左：-10000px

）

我找到了一些关于这方面的文章：关于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;
}

---

这允许您查询样式属性

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

---

这允许您查询样式属性

样式按照其定义的顺序相互覆盖：因此，

some_style3

中的任何内容都可以覆盖

some_style2

中的相同选择器。否则，它将只是选择器集的并集

---

EDIT有些选择器不会覆盖，而是根据以前的定义相对地进行操作，因此您必须小心。

样式按照定义的顺序相互覆盖：因此，在

Some\u style3

中覆盖

Some\u style2

中相同选择器的任何内容都可以。否则，它将只是选择器集的并集

---

编辑某些选择器不会覆盖，而是相对地根据以前的定义进行操作，因此您必须小心。

存在不需要在窗口中渲染的浏览器（无头浏览器）。您可以加载页面并查询所需内容。不过，要想获得您所要求的内容，并不比在普通浏览器中更容易

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

• 大教堂
• 风格的传承,
• 确定哪些规则适用于具有或不具有类、id、属性、同级等的给定元素
• 遴选者的优先次序
• 等

---

它的作者是D.Glazman，W3C CSS小组的联合主席，Kompozer、NVu和BlueGriffon的开发者，因此它应该像预期的那样解析CSS：）

存在不需要在窗口中渲染的浏览器（无头浏览器）。您可以加载页面并查询所需内容。不过，要想获得您所要求的内容，并不比在普通浏览器中更容易

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

• 大教堂
• 风格的传承,
• 确定哪些规则适用于具有或不具有类、id、属性、同级等的给定元素
<