Можно ли вычислить (вычислить) результат css-стиля вручную?

Question

Возможно ли вычислить полученный стиль css на элементе вручную (без необходимости его отображения)?

Допустим, я должен иметь структуру HTML:

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

Я знаю, что такое some_style1, some_style2, some_style3 с точки зрения объекта JS (например, я есть данные для каждого элемента, как: {font: 'Times New Roman' 12px bold; text-align: center;})

Я хочу ВРУЧНУЮ (без необходимости визуализации в браузере всей структуры) вычислить результирующий стиль, который будет влиять на «ТЕКСТ».

Какой алгоритм (или решение) использовать?

Answer 1

Существуют браузеры, которые не нуждаются в рендеринге в окне (безголовый браузер). Вы можете загрузить страницу и запросить то, что хотите. Это не будет проще, чем в обычном браузере, чтобы получить то, что вы просите.

JSCSSP является CSS анализатор написанный в кросс-браузерной JavaScript, который может быть первым шагом на пути к достижению того, что вы хотите с нуля или совсем. Дайте ему таблицу стилей, и он расскажет вам, что браузер проанализировал.Вы все еще должны управлять:

• в DOM,
• наследованием стилей,
• определить, какие правила применяются к данному элементу с или без класса, идентификатор, атрибуты, братья и сестры, и т.д.
• приоритетов селекторов
• и т.д.

Ее автор Д. Glazman, сопредседатель группы W3C CSS и разработчик Kompozer, НВ и BlueGriffon так это should parse CSS как ожидалось :)

Answer 2

Простейшая вещь, о которой я могу думать, это обернуть все это в контейнер, который вы установили display: none, и добавить его в 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); 
    } 
}); 

Live copy | source

Я не могу гарантировать, что все значения будут точно такими же, вы должны попробовать и посмотреть; браузеры могут отложить вычисления некоторых вещей до тех пор, пока контейнер не будет виден. Если вы обнаружите, что некоторые свойства, которые вы хотите, еще не рассчитаны, вам может понадобиться сделать div видимым, но внестраничным (position: absolute; left: -10000px);

Answer 3

Я нашел некоторые статьи об этом: Can jQuery get all styles applied to an element на Stackoverflow.

Кроме того, это один на 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, скажем, будет делать. В противном случае это будет просто объединение наборов селекторов.

EDIT Некоторые селекторы не будут переопределять, но вместо этого действуют относительно предыдущего определения, поэтому вы должны быть осторожны в этом.