动态生成CSS类

Dynamically Make CSS Class

本文关键字：CSS 动态      更新时间：2023-09-26

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

然而，现在我想使用JS来创建这样一个加载栏；我想使用一个函数来定义css的高度、宽度和其他一些属性，并定义加载栏使用了多少个bardiv。我知道有很多库都是这样做的，但我不想在学习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个子。。。

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

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

您已经差不多完成了，但将css添加到文档中的方式是不必要的。你可以用下面的方法更容易地做到这一点，但你必须在向页面添加微调器后才能做到：

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

任何不会改变的东西，比如不应该在jQuery中应用的position: relative，只需将其作为规则添加到现有的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;

我会在您的微调器类中使用标准的spinner.css，并根据需要修改spinner_div的样式。

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

如果你做这件事纯粹是为了学习，那么继续探索，看起来你走在了正确的轨道上。由于您只想使用JS/Jquery，那么您可以使用Jquery-css方法，然后您可以在addSpinner函数中使事情变得更干净：

 spinner_div.css("width", width+'px');
 spinner_div.css("height", height+'px');
 spinner_div.css("margin", margin+'px');

等等。

我知道你只是在玩它，但如果你继续在一个真正的项目中使用它，那么值得注意的是，像使用javascript/jquery那样添加/操纵所有这些CSS样式（尤其是HTML头）被认为是一种糟糕的做法-它的性能很慢，而且更难调试。加载div的一般解决方案是从ajax加载器之类的地方下载css，然后可以使用简单的addClass和removeClassjquery来打开和关闭加载gif。

正如你所知，我仍在学习CSS/HTML5/JS，所以我不能说这是最干净的代码，但我想我至少会发布一个工作示例。我知道静态部分不需要动态声明，但为了举个例子，我离开了它。谢谢大家，是的，我知道我还有很长的路要走：）

<head>
    <script src="jquery-2.1.1.min.js"></script>

    <style>
        @-webkit-keyframes fadeit{
            0%{opacity: 1;}
            100%{opacity: 0;}
        }
        @keyframes fadeit{
            0%{opacity: 1;}
            100%{opacity: 0;}
        }
        .load{}
        .load.brick{
            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>
</head>

<body>
    <div id="spinner" class="load">
    </div>
    <script>
        function addSpinner(bar_amount, time_incr, height, width, margin){
            var spinner_div = $('#spinner');
            //
            //$('head').removeClass('load');
            $('.load ').css({'width': width + 'px',
                            'height': height + 'px',
                            'margin': margin + 'px auto',
                            'position': 'relative'});
            //
            for(var i = 0; i < bar_amount; ++i){
                var degree = i / bar_amount * 360;
                var delay = i * time_incr;
                var tile = $('<div class="load brick"></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);
            }
        }

        $(document).ready(function(){
            addSpinner(9, 0.13, 100, 100, 30);
        });
    </script>

</body>

相关文章：