使用JavaScript动态设置样式实现代码及演示动画

使用JavaScript动态设置样式可以让我们实现更加灵活的页面样式效果，具体步骤如下：

选取元素

首先，我们需要选取需要设置样式的元素，可以使用document.querySelector、document.querySelectorAll等DOM方法来选取元素。例如：

const element = document.querySelector('.box');

设置样式

接着，我们可以使用element.style来设置元素的样式，具体语法如下：

element.style.property = value;

其中property是CSS属性名，value是CSS属性值。例如，将元素的背景颜色设置为红色：

element.style.backgroundColor = 'red';

创建/删除元素

我们还可以使用document.createElement创建新的元素，例如：

const newElement = document.createElement('div');
newElement.className = 'new-box';
document.body.appendChild(newElement);

上述代码会创建一个新的div元素，并将其添加到页面的最后一个元素之后。

另外，我们可以使用element.parentNode.removeChild(element)来删除元素，例如：

const element = document.querySelector('.box');
element.parentNode.removeChild(element);

上述代码会删除class为box的元素。

示例说明

示例1：通过点击按钮添加新元素

HTML代码：

<button id="add-button">添加元素</button>
<div id="container"></div>

JavaScript代码：

const addButton = document.getElementById('add-button');
const container = document.getElementById('container');

addButton.addEventListener('click', function() {
  const newElement = document.createElement('div');
  newElement.className = 'new-box';
  container.appendChild(newElement);
})

上述代码会创建一个按钮和一个空的容器，点击按钮则会向容器中添加一个class为new-box的新元素。

示例2：鼠标悬浮时改变元素的样式

HTML代码：

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

JavaScript代码：

const box = document.getElementById('box');

box.addEventListener('mouseover', function() {
  box.style.backgroundColor = 'red';
  box.style.color = 'white';
})

box.addEventListener('mouseout', function() {
  box.style.backgroundColor = '';
  box.style.color = '';
})

上述代码会创建一个div元素，当鼠标悬浮在这个元素上时，元素的背景色和字体颜色会变为红色和白色；当鼠标移开时，元素的背景色和字体颜色会恢复到原来的样式。

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

使用JavaScript动态设置样式实现代码及演示动画

相关文档推荐