Question

我有以下两个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;"

Answer 1

您可以从字符串中创建关联数组（或映射）并合并它们。这将为您提供合并的属性列表。

否则，如果您只想将所有这些属性应用于元素，即使您有两个相同属性的值，第二个属性也会优先。

Answer 2

这是一个解决方案，它接受一个字符串数组并覆盖以前的任何属性：

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"])

此解决方案适用于任意数量的字符串，而不仅仅是两个字符串。

Answer 3

编写一个函数来从字符串中创建一个对象，例如obj.fontWeight，它会说“粗体”。
使用上述函数从每个字符串中创建一个对象。
使用Object.create创建一个新对象，该对象将第一个对象作为proto arg，将第二个对象作为属性映射。这给出了一个对象，其中第二个对象中的任何属性都覆盖第一个中的属性，但是第二个对象中的属性不是第二个属性，而是第一个属性，从而实现算法的合并部分。
编写一个函数，将你在3中创建的对象的所有属性都变回一个字符串，记住你需要原型上的属性，并且不要在for循环中使用usOwnProperty。

你需要处理从形式到骆驼的情况，这很痛苦但很容易做到。

Answer 4

如上所述，

 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  */

如何合并两个字符串的cssText？

4 个答案: