Question

我在CSS中有6种样式，我想使用此代码随机应用它们：

<script>
    function getRandom(max) {
        return "style" + Math.floor(Math.random() * max);
    }
    document.getElementById('XXX').innerHTML = getRandom(6);
</script>

我需要在文章课上添加XXX

<article class="XXX">

此代码不起作用：（

Answer 1

首先为article标签设置ID

<article class="XXX" id="someId">

然后使用以下代码将类设置为article

var element = document.getElementById("someId");
element.className=getRandom(6);

Answer 2

希望这会有所帮助！

//randomize plugin
(function($) {
    $.rand = function(arg) {
        if ($.isArray(arg)) {
            return arg[$.rand(arg.length)];
        } else if (typeof arg === "number") {
            return Math.floor(Math.random() * arg);
        } else {
            return 4;  // chosen by fair dice roll
        }
    };
})(jQuery);

//your list of classes
var items = ["class-1", "class-2", "class-3", "class-4", "class-5"];

//executes on page load
$("#addRandom").removeClass().addClass(jQuery.rand(items));

//button to inject random class
$("#randomize").click(function() {
      var item = jQuery.rand(items);
     $("#addRandom").removeClass().addClass(item);

});

#addRandom {

display:block;
width: 100px;
height: 100px;

margin: 10px
}

.class-1 {
  background-color: purple;
}

.class-2 {
  background-color: blue;
}

.class-3 {
  background-color: green;
}

.class-4 {
  background-color: yellow;
}

.class-5 {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addRandom" class="">

</div>

<button id="randomize">randomize</button>

Answer 3

如果只需要向元素添加CSS类，答案很简单：

document.getElementById("your-element").classList.add("your-class");

有关更多信息，请参见classList。

Answer 4

谢谢大家！这是可以根据需要运行的代码：

<script>
const elements = document.querySelectorAll('article');
elements.forEach(element => {
        function getRandom(max) {
            return "style" + Math.floor(Math.random() * max);
        }
        element.classList.add(getRandom(6));
    });</script>

如何从js添加到html文章类变量

4 个答案: