JS添加样式|极客笔记

JS添加样式

在前端开发中，样式是网页设计中不可或缺的一部分。通过CSS（层叠样式表）我们可以定义元素的外观和布局，来实现页面的样式效果。然而，在一些特定的情况下，我们可能需要通过JavaScript来动态地添加样式。本文将详细介绍如何使用JavaScript来添加样式。

一、通过JavaScript操作样式

在JavaScript中，我们可以通过获取元素的样式对象来操作元素的样式。每个元素都有一个 style 对象，我们可以通过该对象来修改元素的样式属性。常见的样式属性包括 color, font-size, background-color 等。

以下是一个简单的示例，通过JavaScript动态修改一个 div 元素的背景颜色和字体大小：

<!DOCTYPE html>
<html>
<head>
    <title>JS添加样式</title>
</head>
<body>

<div id="myDiv">这是一个div元素</div>

<button onclick="changeStyle()">改变样式</button>

<script>
function changeStyle() {
    var div = document.getElementById('myDiv');
    div.style.backgroundColor = 'lightblue';
    div.style.fontSize = '20px';
}
</script>

</body>
</html>

点击按钮后，div 元素的背景颜色将变为浅蓝色，字体大小将变为20px。

二、添加CSS类名

除了直接修改元素的样式属性，我们还可以通过添加CSS类名的方式来动态改变元素的样式。在CSS中，我们可以定义一些类，通过给元素添加或移除这些类来改变元素的样式。

以下是一个示例，通过JavaScript来添加和删除一个CSS类来改变元素的样式：

<!DOCTYPE html>
<html>
<head>
    <title>JS添加样式</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="myDiv">这是一个div元素</div>

<button onclick="addHighlight()">添加高亮</button>
<button onclick="removeHighlight()">移除高亮</button>

<script>
function addHighlight() {
    var div = document.getElementById('myDiv');
    div.classList.add('highlight');
}

function removeHighlight() {
    var div = document.getElementById('myDiv');
    div.classList.remove('highlight');
}
</script>

</body>
</html>

点击“添加高亮”按钮后，div 元素的背景颜色将变为黄色，字体加粗；点击“移除高亮”按钮后，样式将恢复为默认样式。

三、修改元素的多个样式

如果需要一次修改元素的多个样式属性，我们可以通过直接设置 style 对象的 cssText 属性来实现。cssText 属性允许我们直接指定一段样式字符串，其中包括多个属性。

以下是一个示例，通过设置 cssText 来同时修改元素的背景颜色和字体大小：

<!DOCTYPE html>
<html>
<head>
    <title>JS添加样式</title>
</head>
<body>

<div id="myDiv">这是一个div元素</div>

<button onclick="changeStyle()">改变样式</button>

<script>
function changeStyle() {
    var div = document.getElementById('myDiv');
    div.style.cssText = 'background-color: lightblue; font-size: 20px;';
}
</script>

</body>
</html>

点击按钮后，div 元素的背景颜色将变为浅蓝色，字体大小将变为20px。