在JS中创建样式按钮

Question

我有一个在我的JS文件中生成的按钮。 我想将其样式设置为引导按钮，并向其添加悬停，ID和类属性。 我不确定该怎么做。 到目前为止，这就是我生成按钮的方式。 是否需要将某些内容导入我的.js文件才能使用引导程序？ 我无法在HTML中生成此按钮，因为仅在单击另一个按钮时才会显示该按钮。

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

Answer 1

默认情况下，该按钮在引导程序中未设置样式。 您应该向其添加一个类以对其进行样式设置。 在引导程序中，基本的是.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添加任何引导类，如下所示：

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，那么它是一个非常有用，易于使用的工具，您应该真正使用它。

  var btn = document.createElement("button"); var txt = document.createTextNode("Bought"); var div = document.getElementById("div"); btn.appendChild(txt); $(btn).attr("id", "Btn1"); $(btn).addClass("btn btn-primary custom"); //add custom to allow hover css $(btn).html("Click me"); div.appendChild(btn); 

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