Как скопировать все созданные пользователем стили из одного объекта в другой

Question

Вопрос был задан here о том, как копировать стили css из одного объекта в другой. И общепринятый ответ был:

var p = document.getElementById("your_p_id"); 
var div = document.createElement("div"); 
div.innerHTML = "your div content"; 
div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText; 

Однако моя ситуация немного отличается. У меня есть сценарий, который создает span, чтобы предположить тег select, а затем скрывает select. Это позволяет упростить стилизацию CSS, поскольку я могу стилизовать span по сравнению с тегом adamant select.

Когда я использую cssText, чтобы скопировать любые стили, применяемые от выбора к диапазону, он выглядит как тег select. Поскольку все встроенные стили применяются также к диапазону, а не только для ввода пользователя, тогда я должен переопределить все эти свойства css десятками, что превосходит цель иметь тег span в первую очередь.

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

До сих пор, у меня есть возможность передавать примененные стили путем передачи class и id от выбора, чтобы охватить, но моя задача становится стили непосредственно примененные на select тега (т.е. в стиле/таблицы стилей, гласит: select { blah : bloh;})

Answer 1

попробовать что-то вроде этого:

function ApplyStyles(select, span) { 
    var select = document.querySelector(select); 
    var span = document.querySelector(span); 
    var sheets = document.styleSheets; 

    for(var i = 0; i < sheets.length; i++) { 
     var rules = sheets[i].cssRules || sheets[i].rules; 
     for(var r = 0; r < rules.length; r++) { 
      var rule = rules[r]; 
      var selectorText = rule.selectorText; 
      if(document.querySelector(selectorText) == select){ 
     for(var l = 0; l < rule.style.length; l++){ 
      span.style[rule.style[l]] = rule.style[rule.style[l]]; 
     } 
      } 
     } 
    } 
} 

Затем используйте функцию следующим образом:

ApplyStyles("#selection", "#span"); 

Вот JSFiddle, например: https://jsfiddle.net/rsLnaw56/2/

Как это работает он находит все внешние стили, применяемые к select элемента и применяет его к span элементу.