javascript动态添加样式(行内式/嵌入式/外链式等规则)

JavaScript动态添加样式是通过DOM操作来实现的，可以通过以下三种方式来添加样式：

一、行内式

使用JavaScript为元素添加行内方式的样式，代码如下：

// 获取元素节点
let element = document.getElementById("example");
// 为元素添加行内方式的样式
element.style.color = "red";
element.style.fontSize = "18px";

上述代码中，首先通过getElementById方法获取到一个元素节点，然后使用style属性为该节点添加行内样式，通过设置style属性下的各个子属性来设置具体的样式规则。

二、嵌入式

使用JavaScript为HTML文档添加嵌入式样式，代码如下：

// 获取head元素
let head = document.head || document.getElementsByTagName('head')[0];
// 创建style元素，设置属性type为"text/css"
let style = document.createElement('style');
style.type = 'text/css';
// 将样式规则添加到style元素中
let rule = '.example { color: red; font-size: 18px; }';
style.appendChild(document.createTextNode(rule));
// 将style元素添加到head元素中
head.appendChild(style);

上述代码中，使用createElement方法创建一个style元素，为其设置属性type为"text/css"，然后将样式规则通过createTextNode方法创建一个文本节点，添加到style元素中，最后使用appendChild方法将style元素添加到head元素中。

三、外链式

使用JavaScript为HTML文档添加外链式样式，代码如下：

// 创建link元素，设置属性type为"text/css"和href属性
let link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'style.css';
// 将link元素添加到head元素中
let head = document.getElementsByTagName('head')[0];
head.appendChild(link);

上述代码中，使用createElement方法创建一个link元素，为其设置属性type为"text/css"、rel为"stylesheet"、href为外部CSS文件路径，然后使用appendChild方法将link元素添加到head元素中。

示例：可以在页面加载的时候动态修改一个div的class属性，从而改变其样式，代码如下：

// 获取元素节点
let element = document.getElementById("example");
// 动态修改class属性
element.className = "newClass";

示例：可以在页面加载的时候，使用JavaScript为元素添加背景图片的样式，代码如下：

// 获取元素节点
let element = document.getElementById("example");
// 为元素添加背景图片样式
element.style.backgroundImage = "url('backgroud_image.jpg')";

上述代码中，通过设置style属性下的backgroundImage子属性来为元素添加背景图片的样式。

以上就是JavaScript动态添加样式的完整攻略，包含行内样式、嵌入式样式和外链式样式三种添加方式，以及相应的示例说明。