Определение во время выполнения, стили которого реализованы с помощью JavaScript

Я хочу использовать JavaScript для получения вычисленного стиля элемента, стиль которого был изменен таблицей стилей. Стиль элемента не изменяется с помощью встроенного CSS, что означает, что свойство style не помогает вообще. Единственной функцией, которую я нашел в HTML, которая может помочь, является getComputedStyle.Определение во время выполнения, стили которого реализованы с помощью JavaScript

Проблема с использованием getComputedStyle заключается в том, что он возвращает все свойства элемента, даже если таблица стилей не переопределила его для этого элемента.

Например, скажем, у меня есть следующие таблицы стилей:

body { 
    font-size: 13px; 
} 
div { 
    color: blue; 
} 
.example { 
    font-weight: bold; 
}

... и следующий HTML:

<body> 
    <div> 
    This is a <span class="example">test</span> 
    </div> 
</body>

Когда я запускаю следующий JavaScript на размаху элемента:

window.getComputedStyle(spanElement)

... Я получаю все атрибуты CSS для этого элемента:

background-attachment: scroll; background-clip: border-box; background-color: 
rgb(255, 255, 255); background-image: none; background-origin: padding-box; 
[...] 
text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none;

Что я хочу - это только стили, которые элемент переопределил (т. те, которые не наследуются), в данном примере это будет:

font-weight: bold;

Есть ли простой способ получить эту информацию? Если нет, то какой лучший способ получить эти результаты? В идеале я хочу решение/алгоритм, который будет быстро запускаться на сотнях этих элементов.

Первоначально я думал, что я мог бы перебирать родительские элементы узла и сравнивать все значения, чтобы определить, какие из них не наследуются, но представляется очень неэффективным сравнивать сотню атрибутов для каждого отдельного узла. Есть только дюжина разных классов, но каждый может происходить сотни раз, поэтому какой-то механизм кеширования может значительно улучшить производительность.

Моей первой идеей кэширования значений было сохранение имени класса и его значения (например, cachedValues['.example'] := 'font-weight: bold;'). Проблема с этим методом заключается в том, что селектора CSS могут быть очень сложными. Например, некоторые свойства унаследованы от их родителей, а это означает, что в моем исходном примере CSS span не внутри div будет отображаться по-разному. Поэтому я подумал, что могу включить родительский элемент в кешированные значения (например, cachedValues['div span.example'] := 'font-weight: bold;'). Проблема здесь в том, что селектора CSS могут значительно усложняться с псевдоклассами, такими как :first-child.

Пример CSS:

div:first-child { 
    color: red; 
} 
div { 
    color: blue; 
}

Пример HTML:

<body> 
    <div>Red line</div> 
    <div>Blue line</div> 
</body>

В этом примере, если я хранится cachedValues['div'] := 'font-color: red;', было бы неверно для второй линии.

Есть ли у вас какие-либо предложения по решению этой проблемы?

источник

2011-01-05 Senseful

Возможно, вы можете получить внешний файл css, исследуя элементы ссылки в голове и проанализируя это. – Stephen

Как это должно использоваться? Если он не находится непосредственно на веб-странице, можно ли это сделать как расширение браузера? Firebug уже может сделать это для отдельных элементов. Вы можете написать расширение firebug, которое просто выводит эту информацию для каждого элемента. –

Любые ограничения браузера? Если вы используете getComputedStyle, вы оставляете IE – Hemlock

Оформить заказ these tests from Quirksmode.org. Вы должны иметь доступ к таблицам стилей с помощью document.styleSheets и проанализировать это.

Особого внимания заслуживают тесты cssText. Кажется, они захватывают все правила конкретного селектора.

источник

2011-01-05 22:46:24 Stephen

Это может работать как однократная кешированная вещь. Вы перебираете все селекторы из 'document.styleSheets', затем используйте jQuery для выбора объектов, соответствующих этим селекторам, и кэширования результатов для каждого элемента. Хотя, я не уверен, как вы будете обрабатывать конфликтующие селекторы, с одним переопределением другого. –

Возможно Ват вы можете сделать это, держать отдельный файл яваскрипта (anyname.js) или может быть инлайн-скрипт будет также делать и объявить Somthing Лик этой

$ (документ) .ready (функция() {

$ ('#') .each (функция() {

$('# <div name>').css({ 'font-weight': 'bold' }); 

}

}

источник

2011-02-09 16:28:18 Sundhar

Ты должен реализовать CSS двигатель, который не является легкой задачей.

Ребята из Firebug Lite сделали это. Вы можете взглянуть на их методы getElementRules и getInheritedRules.

источник

2011-02-09 20:10:24 user123444555621

Определение во время выполнения, стили которого реализованы с помощью JavaScript

ответ

Смежные вопросы