javascript - 动态创建 CSS 类

Question

使用此链接，我使用 HTML 和 CSS 创建了一个加载栏 div
http://www.paulund.co.uk/css-loading-spinners

但是，现在我想用JS来制作这样一个加载栏；我想使用一个函数来定义 css 的高度、宽度和一些其他属性，并定义用于加载栏的栏 div 的数量。我知道有很多库可以执行此操作，但在我仍在学习 JS/jQuery/CSS 期间我宁愿暂时不使用它们。

需要附加到样式元素的是:

        .loading{
            width: 100px;
            height: 100px;
            margin: 30px auto;
            position: relative;
        }

        .loading.bar div{
            width: 10px;
            height: 30px;
            border-radius:5px;
            background: black;
            position: absolute;
            top: 35px;
            left: 45px;
            opacity: 0.05;

            -webkit-animation: fadeit 1.1s linear infinite;
            animation: fadeit 1.1s linear infinite;
        }



        .loading.bar div:nth-child(1){
            -webkit-transform: rotate(0deg) translate(0, -30px);
            transform: rotate(0deg) translate(0, -30px);

            -webkit-animation-delay:0s;
            animation-delay:0s;
        }

我需要在哪里定义宽度、高度、每个第 n 个 child ...

所以我的问题是以下即使是在正确的方向上吗？此外，尝试这样做是否有意义？我的意思是，我想学习；但是，我不想学习一些看似不必要的东西。

    <script>
        function addSpinner(bar_amount, time_incr, height, width, margin){
            //
            //$('head').removeClass('load');
            $('<style>.load{width: ' + width + 'px; height: ' + height + 'px; margin: ' + margin + 'px auto; position: relative;}</style>').append('head');

            //
            $('<style>.load.brick div{width: 10px; height: 30px; border-radius:5px; background: black; position: absolute; top: 35px; left: 45px; opacity: 0.05; -webkit-animation: fadeit 1.1s linear infinite; animation: fadeit 1.1s linear infinite;}</style>').append('head');

            //
            for(var i = 0; i < bar_amount; ++i){
                var degree = i / bar_amount * 360;
                var delay = i * time_incr;

                window.alert('<style>.load.brick div:nth-child(' + (i + 1) + '){ -webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>');

                //
                $('<style>.load.brick div:nth-child(' + (i + 1) + '){-webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>').append('head');
            }


            var spinner_div = $('<div class="load brick"/>');

            for(var i = 0; i < bar_amount; ++i){
                spinner_div.append('<div/>');
            }

            return spinner_div;
        }


        $(document).ready(function(){
            var new_spinner = addSpinner(8, 0.13, 100, 100, 30);

            $('body').append(new_spinner);
        });
    </script>

Answer 1

您就快完成了，但是您将 css 添加到文档的方式是不必要的。您可以通过以下方式更轻松地完成此操作，但您必须在将微调器添加到页面后执行此操作:

$('.load.brick').css({
    'width': width + 'px',
    'height': height + 'px',
    'margin': margin + 'px auto',
    'position': 'relative'
});

任何不会改变的东西，比如 position: relative 你不应该在 jQuery 中应用，只需将它作为规则添加到你现有的 css 文件中。您需要在 jQuery 中包含的唯一内容是可变的内容。这意味着您添加的第二个样式标签应该完全放在您的 css 文件中，因为它是完全静态的。无需通过 jQuery 添加它，因为它只会浪费宝贵的浏览器资源。

此外，您还可以加入 for 循环以获得更整洁、更快的代码:

var spinner_div = $('<div class="load brick"/>');

for(var i = 0; i < bar_amount; ++i) {
    var degree = i / bar_amount * 360,
        delay = i * time_incr,
        tile = $('<div class="tile' + i + '"></div>'

    tile.css({
        '-webkit-transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
        'transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
        '-webkit-animation-delay': delay + 's',
        'animation-delay': delay + 's'
    });

    spinner_div.append(tile);
}

return spinner_div;