将 CSS 对象转换为样式标签

Question

有时我不得不以编程方式将 CSS 样式添加到 DOM（如果你需要一个理由：想象一下编写一个带有自己的样式但应该只包含一个 *.js 文件的小型 ui 小部件以便更轻松处理）。在这种情况下，我更喜欢在我的脚本代码中使用对象表示法定义样式，而不是一个混合规则、属性和标记的大字符串。

var thumbHoverStyle = {
    "background-color": "rgba(211, 211, 211, 0.5)",
    "cursor": "pointer"
};

对

var thumbHoverStyle = "<style> .thumb:hover { background-color: rgba(211, 211, 211, 0.5); cursor: pointer; } </style>";

这样的 css 对象可以很容易地与 JQuery's .css() function 一起使用，但是一旦我想设置 css pseudo-class 的样式（在我的示例中为：hover），麻烦就开始了。在这种情况下，我不能使用 JQuery .css() 函数，我只能在我的 DOM 中插入相应的样式标签。

var thumbHoverStyleTag = toStyleTag( { ".thumb:hover": thumbHoverStyle } );
_root.append(thumbHoverStyleTag);

我用谷歌搜索和 stackoverflowed，但找不到将我的 css 对象转换为样式标签的实用程序函数。 最后我写了自己的函数（我可能会提供它作为这个问题的答案），但我仍然想知道是否有一个库函数。 实现此目的最优雅的方法是什么？

编辑

我在 TypeScript 中的实现：

function appendPxIfNumber(value: any): string
{
    return (typeof value === "number") ? "" + value + "px" : value;
}

function toStyleTag(rulesObj: any)
{
    var combinedRules: string = "";
    for (var selector in rulesObj)
    {
        var cssObject = rulesObj[selector];
        var combinedProperties = "";
        for (var prop in cssObject) {
            var value = cssObject[prop];
            combinedProperties += `${prop}: ${appendPxIfNumber(value)};` + "\n";
        }
        combinedRules += ` ${selector} {${combinedProperties}}` + "\n";
    }
    return $(`<style>${combinedRules}</style>`);
}

使用示例：

var styleTag = toStyleTag( { ".thumb": thumbStyle, ".thumb:hover": thumbHoverStyle } );

Answer 1

我想再试一次，因为这是一个有趣的问题。

这是我整理的原生 javascript 解决方案：

var thumbStyle = {
    "width" : "100px",
    "height" : "100px",
    "text-align" : "center",
    "line-height" : "100px",
    "background-color": "rgb(211, 211, 211)"
};

var thumbHoverStyle = {
    "color" : "rgb(255,255,255)",
    "background-color": "rgb(255, 0, 0)",
    "cursor": "pointer"
};

var dynamicStyle = document.createElement('style');
document.head.appendChild(dynamicStyle);
var dynamicStyleSheet = dynamicStyle.sheet;

function addStyles(selector, cssStyleObject) {
    var properties = Object.keys(cssStyleObject);
    properties.forEach(function(property){
        var value = cssStyleObject[property];
      
        var dynamicRule = selector + ' {' + property + ': ' + value + ';}';
      
        dynamicStyleSheet.insertRule(dynamicRule, dynamicStyleSheet.cssRules.length);
    });
}

// Add styles dynamically by stating a selector and the name of a CSS Style Object

addStyles('div', thumbStyle);
addStyles('div:hover', thumbHoverStyle);

<div>Hover Me</div>

Answer 2

我很想：

• 在mouseover() 上添加thumbHoverStyle CSS 对象；和
• 在mouseout() 上用thumbDefaultStyle CSS 对象替换它

var thumbStyle = {
    "width" : "100px",
    "height" : "100px",
    "text-align" : "center",
    "line-height" : "100px",
    "background-color": "rgb(211, 211, 211)"
};

var thumbHoverStyle = {
    "color" : "rgb(255,255,255)",
    "background-color": "rgb(255, 0, 0)",
    "cursor": "pointer"
};

var thumbDefaultStyle = {
    "color" : "rgb(0,0,0)",
    "background-color": "rgb(211, 211, 211)",
    "cursor": "default"
};

$(document).ready(function(){

    $('div').css(thumbStyle);

    $('input[type="checkbox"]').change(function(){

        if ($('input[type="checkbox"]').prop('checked')) {

            $('div').mouseover(function(){
                $(this).css(thumbHoverStyle);
            });

            $('div').mouseout(function(){
                $(this).css(thumbDefaultStyle);
            });
        }

        else {

            $('div').mouseover(function(){
                $(this).css(thumbDefaultStyle);
            });

            $('div').mouseout(function(){
                $(this).css(thumbDefaultStyle);
            });
        }
    });
});

div, button {
display: inline-block;
margin-right: 24px;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Hover Me</div>
<input type="checkbox" />Activate New Hover Behaviour

Answer 3

我的函数 toStyleTag() 背后的方法是它首先使用 for...in statement 迭代 styleTag 并检查 styleTag hasOwnProperty() 是否是 selector。然后我reduce() 通过在对象上执行Object.keys() 返回的数组styleTag[selector]，我通过加入currentValue（属性）和styleTag[selector][currentValue]]（规则）来concat()accumulator将: 分开。这样做可以让styles 成为property: rule 形式的字符串数组。现在这是我们需要使用insertRule() 的格式，我们使用它来将新的CSS 规则插入到当前样式表中。请注意，我正在抓取 cssRules 的长度以找到索引 + 1，以便我们可以在样式表的最后插入这条新规则，以确保它不会被覆盖。

var styleSheet = document.styleSheets[0];

function toStyleTag(styleTag) {
  for(var selector in styleTag) {
    if(styleTag.hasOwnProperty(selector)) {
      let styles = Object.keys(styleTag[selector]).reduce(function(accumulator, currentValue) {
        return accumulator.concat([currentValue, styleTag[selector][currentValue]].join(':'));
      }, []);
      styleSheet.insertRule(selector + '{' + styles.join(';') + '}', styleSheet.cssRules.length);
    }
  }
}

var thumbHoverStyle = {
  'background-color': 'rgba(211, 211, 211, 0.5)',
  'cursor': 'pointer'
};

toStyleTag({ '.thumb:hover': thumbHoverStyle });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb">
  <img src="http://placehold.it/350x350">
</div>

Answer 4

这是一个适用于原始样式对象的工作示例： 我会将JSON 转换为CSS。并定义一个应该设置样式的目标请记住，没有应该设置样式的选择器......所以我添加了一个targetSelector。

var targetSelector='.thumb:hover',
    styleObj = {
      "background-color": "rgba(211, 211, 211, 0.5)",
      "cursor": "pointer"
    },

    // Convert the JSON into CSS
    styleTagContent = JSON.stringify(styleObj,null,'\t')
                          .replace(/"/g,'')
                          .replace(/,\n/g,';')
                          .replace(/\}/g, ';}')  



  $('<style>'+targetSelector+styleTagContent+'</style>').appendTo('head');

这是一个有效的Plunk，看看它是如何工作的。