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

提問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樣式，因爲相對於堅固的select標籤，我可以更輕鬆地設計span。

當我使用cssText時，要將從select中應用的所有樣式複製到span，結果看起來就像是一個select標籤。由於所有內置樣式都適用於span，而不僅僅是用戶輸入，所以我必須用幾十個來覆蓋所有這些css屬性，這首先打破了span標籤的作用。

有沒有辦法只複製用戶提供的樣式，而不是用於樣式元素的整個樣式表？。

到目前爲止，我已經能夠通過把從選擇跨越class和id傳輸應用的樣式，但我面臨的挑戰是讓風格直接塗抹在select標籤（即在款式/樣式表，其內容如下： select { blah : bloh;}）

來源

2017-01-03 Anonymous Armadillo

如何應用用戶定義的樣式？使用課堂？如果是，則應用相同的類 – anu

您是否需要舊版瀏覽器支持？ –

你是否只想要style屬性的樣式？ – Jarek

嘗試這樣：

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元素。

來源

2017-01-03 12:20:35

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

回答

相關問題