如何將所有用戶提供的樣式從一個對象復制到另一個對象

Question

這里有一個問題，詢問如何將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樣式設置，因為相對於堅定的select標記，我可以更輕松地設置span樣式。

當我使用cssText ，要將從select中應用的任何樣式復制到span，它最終看起來像一個select標簽。 由於所有內置樣式也應用於跨度而不僅僅是用戶輸入，因此我必須通過數十個覆蓋所有這些css屬性，這首先打算使用span標記。

有沒有辦法只復制用戶提供的樣式而不是用於樣式元素的整個樣式表？

到目前為止，我已經能夠通過將class和id從select轉移到span來傳輸應用的樣式，但我的挑戰是將樣式直接應用於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元素。