无法弄清楚为什么我的Javascript没有使用Bulma框架更改CSS

Question

I am new to css and Bulma.

This is the relevant code for my problem.

for (var i=0; i<20; i++){

  if (i<list.length){

    var textTemplate="{{text}}";
    attach= Mustache.render(textTemplate,list[i]);
    attach=document.createTextNode(attach);
    var basePlate=document.createElement("section");

    basePlate.style.class="section";

    var listPiece=document.createElement("dt");

    listPiece.style.class="container";

    toInsert.appendChild(basePlate);

    basePlate.appendChild(listPiece);

    listPiece.appendChild(attach);
    ....

The class changes to basePlate and listPiece isn't changing anything on the actual web page, and I have no idea why. Can anyone explain?

Answer 1

Because inside object style are css properties such background-color , width , opacity , display , etc

use:
listPiece.className="container";

reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/className