How do I change a button size in javascript

Question

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.

[This any help](https://stackoverflow.com/questions/11833759/add-stylesheet-to-head-using-javascript-in-body) — Xantium, Nov 19 '17 at 23:59

mohdule · Accepted Answer · 2018-10-23T01:11:34.887

Use the style.width property before you append the button element to the body, like so :

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

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

buttonShort.style.width = '200px'; // setting the width to 200px
buttonShort.style.height = '200px'; // setting the height to 200px
buttonShort.style.background = 'teal'; // setting the background color to teal
buttonShort.style.color = 'white'; // setting the color to white
buttonShort.style.fontSize = '20px'; // setting the font size to 20px

body.appendChild(buttonShort);

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

all the other CSS properties are accessible through the style object (width, height, color, ...etc)

NOTE: beware of properties like font-size you cannot use the - as an object key so the way you would go about doing that is by camelCasing it like so fontSize.

As @tareq [showed](https://stackoverflow.com/a/47383354/4698558), If you are planning to do more than just changing the width of an element and don't want to do this assignment every time, you may use the `style.cssText` property and assign it to a string that contains normal css. Like so : `button.style.cssText = 'width: 20px; color: teal';` — mohdule, Sep 17 '18 at 16:20

Tareq · Answer 2 · 2017-11-20T09:32:29.553

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;
}

score 0 · Answer 3 · edited Nov 20 '17 at 04:53

0

How about the following code?

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

edited Nov 20 '17 at 04:53

dodo

156
10

answered Nov 19 '17 at 23:58

nzkks

106
7

I just had to change a little bit of it but despite that, it worked. Thanks! – Charlie Apr 21 '18 at 22:49

saitamatechno · Answer 4 · 2022-05-07T12:41:06.487

0

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>

edited May 07 '22 at 12:41

answered Feb 13 '22 at 17:24

saitamatechno

49
6

How do I change a button size in javascript

4 Answers4