如何在Javascript中使按钮居中

Posted 2023-03-29

【中文标题】如何在Javascript中使按钮居中

【英文标题】：How to center a button in Javascript

【发布时间】：2021-09-09 09:26:21

【问题描述】：

我正在尝试使 javascript 中的按钮居中，使其在页面中水平居中。现在，我的按钮在我的 html 文件中，所以我不知道如何使用 CSS 将其居中，因为它是在 Javascript 中。

TLDR：在 Javascript 中，如果我声明了一个按钮 btn，我应该编写什么代码来使其水平居中？

我在整个互联网上搜索了一种使用 Javascript 使按钮居中的方法，但无济于事。希望大家能帮帮我。

谢谢！

【问题讨论】：

为什么你不想使用 css 来做这件事？使用 JavaScript 的原因是什么？

使用 CSS 更容易，有关如何使用 CSS 的信息，请参阅w3schools.com/html/html_css.asp。

是的，我知道如何在 CSS 中做到这一点，但我编写代码的具体方式导致我不得不在脚本标签中执行此操作:(

【参考方案1】：

如果我理解正确，您希望将已创建的按钮居中，它可以像这样工作：

<!--In only HTML-->
<button style="position: absolute; left: 50%; transform: translateX(-50%);">Click Me</button>

另一种方法是为按钮设置一个 id，然后将其置于单独的 CSS 文件或

<!--HTML-->
<button id="myButton">Click Me</button>

/*  
  CSS 
  Remember to use a # before the name because it's an id you're trying to reach
*/
#myButton 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

或者您可以使用具有相同 HTML 基础的 JavaScript

<!--HTML-->
<button id="myButton">Click Me</button>

然后在单独的 JavaScript 文件或

// Javascript
let myButton = document.querySelector("#myButton");  myButton.style.position = "absolute";
myButton.style.left = "50%";
myButton.style.transform = "translateX(-50%)";

【讨论】：

非常感谢您的回答！ *** 不会让我对此表示赞同，但我只是想让你知道我是多么感激 :) 祝你有美好的一天！

是的，我知道，我很高兴能提供帮助。

【参考方案2】：

你可以使用CSS DOM在javascript中实现它

您可以使用 style 关键字来设置元素的样式

例如，如果您有此代码可将 css 中的按钮居中

<div id="div">
  <button>hi</button
</div>

div
 display: flex;
 align-items: center;

你可以用javascript写成

const div = document.getELementById("div");
div.style.display = "flex";
div.style.alignItems = "center";

【参考方案3】：

这里有两种方法：

直接在你的 javascript 中添加样式：

// Create button
var myCenteredButton = document.createElement('button')
myCenteredButton.textContent = 'Here is my centered button'

// Before inserting it to the DOM, add your style
myCenteredButton.style.display = 'block'
myCenteredButton.style.margin = '0 auto'

// Insert to DOM
document.body.append(myCenteredButton)

添加一个类并让 css 设置它的样式：

// Create button
var myCenteredButton = document.createElement('button')
myCenteredButton.textContent = 'Here is my centered button'

// Before inserting it to the DOM, add a class for styling with css
myCenteredButton.classList.add('center-me')

// Insert to DOM
document.body.append(myCenteredButton)

.center-me 
  display: block;
  margin: 0 auto;