CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WHITECOLOR
WHITECOLOR

Reputation: 26192

Is it possible to calculate (compute) resulting css style manually?

Is it possible to compute resulting css style on the element manually (without need to render it)?

Lets say I'm supposed to have an HTML structure:

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

I know what are some_style1, some_style2, some_style3 in terms of JS object (for example i have data for each element like: {font: 'Times New Roman' 12px bold; text-align: center;})

I want to MANUALLY (without need to render in browser the whole structure) compute resulting style that will effect "TEXT".

What algorithm (or solution) should I use?

Upvotes: 1

Views: 879

Answers (4)

FelipeAls
FelipeAls

Reputation: 22171

There exist browsers that don't need rendering in a window (headless browser). You can load a page and query what you want. It won't be easier than in a normal browser to obtain what you ask though.

JSCSSP is a CSS parser written in cross-browser JavaScript that could be a first step to achieve what you want from scratch or quite. Give it a stylesheet and it'll tell you what a browser would've parsed. You still must manage:

  • the DOM,
  • inheritance of styles,
  • determine which rules apply to a given element with or without class, id, attributes, siblings, etc
  • priorities of selectors
  • etc

Its author is D. Glazman, co-chairman of the W3C CSS group and developer of Kompozer, NVu and BlueGriffon so it should parse CSS as expected :)

Upvotes: 1

Xophmeister
Xophmeister

Reputation: 9219

Styles override each other in the order in which they're defined: So anything in some_style3 that overrides the same selector in some_style2, say, will do. Otherwise, it will just be a union of the sets of selectors.

EDIT Some selectors won't override, but instead act relatively on a previous definition, so you've got to be careful about that.

Upvotes: 0

Bart Vangeneugden
Bart Vangeneugden

Reputation: 3446

I found some articles about this: Can jQuery get all styles applied to an element on Stackoverflow.

Also this one on quirksmode: Get Styles that shows the following function:

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

This allows you to query for style properties

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075755

The simplest thing I can think of is to wrap the whole thing in a a container that you set display: none on, and append it to the DOM. The browser won't render it, but you'll then be able to query the computed style.

Here's an example showing how jQuery can't find the style information when the structure isn't connected to the DOM, but when it is, it can:

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

I can't guarantee all values will be exactly right, you'll have to try it and see; browsers may defer calculating some things until/unless the container is visible. If you find that some properties you want aren't calculated yet, you may have to make the div visible, but off-page (position: absolute; left: -10000px);

Upvotes: 0

Related Questions