js怎么给文字居中并加粗显示

要实现文字居中并加粗显示，可以使用CSS来进行样式控制。 具体方法有多种，其中常见的包括使用内联样式、内部样式表以及外部样式表。下面详细介绍其中一种方法：使用内联样式。

一、使用内联样式

内联样式是将CSS样式直接写在HTML元素的style属性中。这个方法简便易行，适合在小型项目或者简单的HTML文档中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
</head>
<body>
    <div style="text-align: center; font-weight: bold;">
        居中并加粗的文字
    </div>
</body>
</html>

在这个示例中，text-align: center; 将文本水平居中，font-weight: bold; 将文本加粗。可以看到，通过简单的内联样式，就能轻松实现这个效果。

二、使用内部样式表

内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中。这种方法适用于中等规模的项目，能够更方便地管理样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
    <style>
        .center-bold-text {
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="center-bold-text">
        居中并加粗的文字
    </div>
</body>
</html>

在这个示例中，我们定义了一个类.center-bold-text，并将其应用到目标<div>元素上。这样可以更加清晰地管理样式，并且避免内联样式带来的混乱。

三、使用外部样式表

外部样式表是将CSS样式写在独立的CSS文件中，并在HTML文档中通过<link>标签引入。这种方法适用于大型项目，能够极大地提高样式的可维护性和复用性。

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="center-bold-text">
        居中并加粗的文字
    </div>
</body>
</html>

CSS文件（styles.css）

.center-bold-text {
    text-align: center;
    font-weight: bold;
}

通过这种方法，我们可以将所有的样式集中管理，CSS文件可以被多个HTML文档引用，从而提高代码的复用性。

四、使用JavaScript动态添加样式

有时候，我们可能需要在运行时动态改变元素的样式，这时候可以使用JavaScript来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
</head>
<body>
    <div id="text">
        居中并加粗的文字
    </div>
    <script>
        const textElement = document.getElementById('text');
        textElement.style.textAlign = 'center';
        textElement.style.fontWeight = 'bold';
    </script>
</body>
</html>

在这个示例中，我们使用JavaScript获取目标元素，并动态添加text-align和font-weight样式。这种方法适用于需要根据用户操作或其他动态条件修改样式的场景。

五、使用Flexbox实现居中

如果需要更复杂的布局控制，Flexbox是一个非常强大的工具。它不仅能实现水平居中，还能实现垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
    <style>
        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 使容器高度占满整个视口 */
        }
        .bold-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="flex-center">
        <div class="bold-text">
            居中并加粗的文字
        </div>
    </div>
</body>
</html>

在这个示例中，.flex-center 类利用了Flexbox的justify-content和align-items属性，实现了水平和垂直居中。.bold-text 类则用于加粗文本。

六、使用Grid布局实现居中

CSS Grid布局是另一种强大的布局工具，可以用来实现复杂的布局需求，包括居中对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中并加粗的文字</title>
    <style>
        .grid-center {
            display: grid;
            place-items: center;
            height: 100vh; /* 使容器高度占满整个视口 */
        }
        .bold-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-center">
        <div class="bold-text">
            居中并加粗的文字
        </div>
    </div>
</body>
</html>

在这个示例中，.grid-center 类利用了Grid布局的place-items属性，实现了水平和垂直居中。.bold-text 类同样用于加粗文本。

七、不同方法的优缺点

不同的方法有各自的优缺点，选择合适的方法取决于项目的规模、复杂度以及具体需求。

内联样式

优点：

简单易懂，适合小型项目或临时样式调整。

缺点：

难以维护，不适合大规模项目。

内部样式表

优点：

样式集中管理，适合中等规模项目。

缺点：

样式无法复用，不适合多个页面共享同一套样式。

外部样式表

优点：

样式高度可维护，适合大型项目和多个页面。

缺点：

初始加载时间略长，需要额外的HTTP请求。

JavaScript动态样式

优点：

适合动态条件下修改样式。

缺点：

代码复杂度增加，可能影响性能。

Flexbox和Grid布局

优点：

强大的布局能力，适合复杂布局需求。

缺点：

需要学习和理解额外的布局模型。

通过上述方法，可以灵活地实现文字居中并加粗显示的效果。选择哪种方法取决于具体的项目需求和个人偏好。