如何在HTML中设置按钮的大小

Question

我的纯HTML / JS页面上有一些按钮。 在浏览器中打开页面时，按钮大小正常。 但是在刷新/重新加载页面上，按钮大小会减小。 实际上，我没有设置按钮文本值。按钮的文本为空白。 我应该如何在HTML中设置按钮的大小而不考虑文本的大小？

Answer 1

你的意思是this吗？

<强> HTML

<button class="test"></button>

<强> CSS

.test{
    height:200px;
    width:200px;
}

如果您想避免使用CSS ，请参阅this：

<button style="height:200px;width:200px"></button>

Answer 2

这不能用纯HTML / JS来完成，你需要CSS

CSS：

button {
     width: 100%;
     height: 100%;
}

以所需尺寸替换100％

这可以通过多种方式完成

Answer 3

button { 
  width:1000px; 
} 

甚至

 button { 
    width:1000px !important
 } 

如果这就是你的意思

Answer 4

如果使用以下HTML：

<button id="submit-button"></button>

可以使用HTMLElement上可用的样式对象通过JS应用样式。

要将上述示例按钮的高度和宽度设置为200px，这将是JS：

var myButton = document.getElementById('submit-button');
myButton.style.height = '200px';
myButton.style.width= '200px';

我相信通过这种方法，您不会直接编写CSS（内联或外部），而是使用JavaScript以编程方式更改CSS声明。