如何將兩個字符串的cssText合併爲一個？

我有以下兩個cssText字符串：如何將兩個字符串的cssText合併爲一個？

var s1 = "text-align: right; font-weight: bold;"; 
var s2 = "text-align: left; color: #000";

我需要得到的字符串，從他們由合併後的屬性：

var result = merge(s1, s2);

結果：

"text-align: left; font-weight: bold; color: #000;"

來源

2014-02-15 Erik

所以其合併並取代了。「文本對齊」正在被覆蓋。不是嗎？ – anurupr

是的。文本對齊應該被覆蓋最後一個 – Erik

您可以創建一個將關聯數組（或映射）從字符串中移出併合並。這會給你合併的屬性列表。否則，如果您只是想將所有這些屬性應用於元素，即使您有兩個相同的屬性值，第二個屬性也會優先。

來源

2014-02-15 07:54:33

你的意思是我可能只是應用那裏的字符串元素？如下所示：el.style.cssText = s1 + s1？ – Erik

是的。你可以嘗試這樣的：

。這將適用於div的文本對齊。 –

謝謝。這是非常高性能的解決方案。 – Erik

這裏是一個解決方案，將字符串數組並覆蓋任何屬性，如果它是有以前：

function merge(strings){ 
    var result = {} 
    for(var i in strings){ 
     var cssProperties = createObject(strings[i]) 
     for(var attr in cssProperties) { 
      result[attr] = cssProperties[attr]; 
     } 
    } 
    var s = '' 
    for(var attr in result){ 
     s += attr + ':' + ' ' + result[attr] + '; '; 
    } 
    return s.trim() 
} 

function createObject(s1){ 
    var obj = {}; 
    var properties = s1.split(';'); 
    for(var i=0; i<properties.length; i++){ 
     var property = properties[i].split(':'); 
     if(property.length == 2){ 
      console.log(property[1]); 
      obj[property[0].trim()] = property[1].trim(); 
     } 
    } 
    return obj; 
} 

merge(["text-align: right; font-weight: bold;", "text-align: left; color: #000"])

該解決方案將不只是兩個字符串的任意號碼，工作。

來源

2014-02-15 07:57:04

謝謝你的回答。 – Erik

編寫一個函數，使一個對象脫離字符串，給你例如obj.fontWeight，它會說「粗體」。
使用上述函數從每個字符串中創建一個對象。
使用Object.create創建一個新對象，該對象將第一個對象作爲原始參數，將第二個對象作爲屬性映射。這給了一個對象，其中第二個對象中的任何屬性都會覆蓋第一個對象中的屬性，但其中的屬性不是第二個對象中的屬性，因此實現算法的合併部分。
編寫一個函數，將您在3中創建的對象的所有屬性都轉換爲字符串，記住您需要原型的屬性以及不要在for循環中使用hasOwnProperty。

你需要處理從 - 形式到駱駝的情況，這是痛苦的，但很容易做到。

來源

2014-02-15 08:07:44 Woody

如上所述，

element.style.CSStext = s1+s2

是最適合直接使用CSS ......然而，

result = eval ("({"+ (s1+s2) . replace(/ *([^:;]+) */g,"'$1'") . replace(/;/g,",")+ "})" ) /* make object literally */ 
         . toSource()        /* lucky if using FF browser */ 
          . replace(/'|"|\({|}\)/g,"") 
            . replace(/,/g,";")   /* massage result */

來源

2015-08-04 01:47:11 ekim

如何將兩個字符串的cssText合併爲一個？

回答

相關問題