'How do I change a button size in javascript

I'm using javascript to create buttons in a chrome extension but I can't find a way to change the size of the button, here's the code.

var buttonShort = document.createElement("button");
buttonShort.innerHTML = "Generate Short Password";

var body = document.getElementsByTagName("body")[0];
body.appendChild(buttonShort);

buttonShort.addEventListener ("click", function() {
  var newWindow = window.open();
  newWindow.document.write("The generated Password is: '" + short() + "'");
  newWindow.focus()
});

I need to change the size of the button (mainly the width) so if you have any suggestions, please say. Also if you're going to say use CSS, I don't know how to add a CSS file to a javascript file so please tell me how to do that if you don't mind.

Thanks.

javascriptcssbuttonsize


Solution 1:[1]

You can either use className or cssText to do so. If you used className, you need to define the class in CSS.

// By setting css class name
var buttonShort = document.createElement("button");
buttonShort.innerHTML = "Generate Short Password";
// set class name 
buttonShort.className = "button";
var body = document.getElementsByTagName("body")[0];
body.appendChild(buttonShort);

// Or using JS
var buttonShort = document.createElement("button");
buttonShort.innerHTML = "Generate Short Password 2";
// set CSS name  using js
buttonShort.style.cssText = "border: 1px solid black; background-color:blue;height: 20px;color:white";
var body = document.getElementsByTagName("body")[0];
body.appendChild(buttonShort);
.button {
 border: 1px solid black ;
 background-color: orange;
 height: 20px;
}

Solution 2:[2]

How about the following code?

var cssString = "{padding: 15px 20px; color: #F00;}";
buttonShort.style.cssText = cssString;

Solution 3:[3]

put this into head tag:

<style>
p.ex3 {
      font-size: 15px;
    }
</style>

and put this into body:

<div><p id="demo" class="ex0">Led Off</p></div>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Led 
On"'><p class="ex3">Led On</p></button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 dodo
Solution 3

Related Questions