Проверьте, какие свойства были унаследованы элементом

Question

Если вы нажмете F12 на странице в Google Chrome, вы увидите консоль разработчика. Следующая вкладка, которая появляется (справа на «Стили»), «Вычисляется». Если вы откроете эту вкладку, вы увидите, какие приемы определенного элемента вы выбрали из левой панели. Мой вопрос в том, как я могу проверить, какие из этих свойств были унаследованы («Show inherited»)? Я пробовал следующий сценарий, но это не удалось:

var ssheets = document.styleSheets, 
ssheets_length = document.styleSheets.length; 

for(var k = 0; k < ssheets_length; k++){ 
    var rules = ssheets[2].cssRules; 
    for(var i = 0; i < rules.length; i++) { 
     if (catched_element.is(rules[i].selectorText)) { 
     final_array.push(rules[i]); 
     } 
    } 
} 

Это то, что я пытался найти в правилах, если элемент не был унаследован. Если правило наследуется, оно будет перенесено в массив, в котором отображаются только те элементы, которые отображаются на вычисленной вкладке, если вы не установите флажок «Показать унаследованный». Любые идеи по этому поводу?

Answer 1

Я не думаю, что вам нужно написать сценарий для этого. Если вы нажмете «Показать унаследованные», вы можете прокрутить вниз, и вы увидите некоторые CSS с бледным цветом, а некоторые с более ярким цветом. Бледные - унаследованные.