在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*/ }