Question

我有这个在我的JS文件中生成的按钮。我想将它设计为一个引导按钮，并为其添加悬停，ID和类属性。我不知道该怎么做。这就是我到目前为止生成按钮的方式。我是否必须将某些内容导入我的.js文件才能使用bootstrap？我无法在HTML中生成此按钮，因为只有在单击其他按钮时才会显示该按钮。

// here is the button logic
    var btn = document.createElement("button");
    var txt = document.createTextNode("Bought");

    btn.appendChild(txt);
    li.appendChild(btn);

Answer 1

默认情况下，该按钮在引导程序中未设置样式。你应该为它添加一个类来设置它的样式。在bootstrap中，基本的是.btn，但还有更多。

只需在javascript中将此类添加到按钮即可。

...
btn.className = 'btn';
...

Answer 2

您需要先使用链接标记

在html页面中导入引导程序

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

然后你可以使用这样的javascript添加任何bootstrap类：

var btn = document.createElement("button");
var txt = document.createTextNode("Bought");
// class name you want to set, bootstrap button class in your case
btn.className = "btn btn-primary";
btn.appendChild(txt); 
li.appendChild(btn);`

Answer 3

如果未导入bootstrap，请在html代码中导入它，然后再输入 var attribute=createAttribute("attributeName");
之后，将值添加到属性
attribute.value="value"
最后将属性添加到元素
element.setAttributeNode(attribute)

Answer 4

我确信这可以通过常规js完成，但这是我的jquery解决方案。如果您不知道jquery是什么，它是一个非常有用，易于使用的工具，您应该真正查找。

.custom : hover {
  /*stuff to do on hover*/
}

let array:[String] = ["one", "two","three"]

array.joined(separator: " ")

在JS中创建的样式按钮

4 个答案: