JavaScriptのボタンのサイズを変更するにはどうすればいいですか？

Question

javascriptを使用してクロム拡張機能のボタンを作成していますが、ボタンのサイズを変更する方法が見つかりません。

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

私は、ボタンの大きさ（主に幅）を変更する必要があるので、あなたが何か提案がある場合は、言ってください。また、CSSを使用すると言う場合は、CSSファイルをjavascriptファイルに追加する方法がわからないので、気にしない場合はその方法を教えてください。

ありがとうございました。

Answer 1

次のコードはどうですか？

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

Answer 2

classNameまたはcssTextのいずれかを使用できます。 classNameを使用した場合、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; 
 
}