js动态添加css样式（js动态添加div）

标题：JS动态添加CSS样式

简介：

在网页开发中，我们经常需要使用CSS来美化页面，但有时我们需要在运行时动态添加CSS样式，以实现更灵活的效果。本文将介绍如何使用JavaScript动态添加CSS样式。

一、动态添加内联样式

在JavaScript中，我们可以使用`style`对象来动态修改元素的内联样式。内联样式是直接写在HTML标签中的样式，有时我们需要在运行时动态修改这些样式。

例如，假设我们有一个`div`元素的id是`myDiv`，我们想在运行时改变它的背景颜色为红色，可以使用如下代码：

```javascript

var myDiv = document.getElementById("myDiv");

myDiv.style.backgroundColor = "red";

```

通过修改`style`对象的属性，我们可以改变元素的内联样式。

二、动态添加外部样式表

除了修改元素的内联样式，我们还可以动态添加外部样式表，这样就可以为整个页面或特定元素添加样式。

首先，我们需要创建一个`link`元素，用于引入外部样式表。然后，将该元素的`href`属性设置为所需的样式表路径，再将该元素添加到文档的头部。

例如，假设我们有一个样式表文件`styles.css`，我们想在运行时将其添加到页面中，可以使用如下代码：

```javascript

var link = document.createElement("link");

link.rel = "stylesheet";

link.href = "styles.css";

document.head.appendChild(link);

```

这样，样式表`styles.css`将被动态地添加到页面中。

三、动态创建样式规则

有时，我们需要动态创建样式规则，并将其应用到页面某个元素上。在JavaScript中，我们可以使用`insertRule`方法或`addRule`方法来实现这一点。

`insertRule`方法适用于大多数现代浏览器。例如，假设我们要在运行时为元素`myDiv`添加一个样式规则，设置其字体为20像素，并将该样式规则应用到页面上，可以使用如下代码：

```javascript

var myDiv = document.getElementById("myDiv");

var styleSheet = document.styleSheets[0];

styleSheet.insertRule("#myDiv { font-size: 20px; }", 0);

```

`addRule`方法适用于一些旧版本的浏览器。例如，假设我们要为元素`myDiv`添加一个样式规则，设置其字体为20像素，并将该样式规则应用到页面上，可以使用如下代码：

```javascript

var myDiv = document.getElementById("myDiv");

var styleSheet = document.styleSheets[0];

styleSheet.addRule("#myDiv", "font-size: 20px;", 0);

```

通过动态创建样式规则，我们可以实现对元素样式的精细控制。

总结：

通过JavaScript动态添加CSS样式，我们可以实现更灵活的样式效果。通过修改元素的内联样式、动态添加外部样式表或动态创建样式规则，我们可以在运行时实现对页面样式的动态变化。这为网页开发带来了更多的可能性和创造力。