动态样式类封装JS代码

动态样式类封装JS代码是一种实现动态样式的技术，它可以通过JavaScript来操作DOM元素的CSS样式属性，从而实现页面中元素动态变化的效果。

下面是实现动态样式类封装JS代码的完整攻略：

创建动态样式类

首先要创建一个动态样式类，该类需要包含一些CSS样式属性，可以使用JavaScript的createElement方法动态创建该类：

var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
var sheet = style.sheet;
sheet.insertRule('.dynamic-class {color: red; background-color: blue;}', 0);

在上面的代码中，首先通过createElement方法创建了一个style元素，并添加了一些type属性。接着使用sheet属性获取该元素对应的CSS样式表，然后使用insertRule方法在样式表中添加了一条样式规则，这条规则将创建一个名为dynamic-class的样式类，并为该类定义了一些CSS样式。

现在我们已经创建了一个好看的动态样式类，接下来我们需要动态地将该类添加到一个元素上。

动态添加样式类到元素

假设我们想要将创建的dynamic-class样式类添加到页面中的<p>元素上，可以使用JavaScript的classList属性实现：

var elem = document.querySelector('p');
elem.classList.add('dynamic-class');

在上面的代码中，首先使用querySelector方法获取了页面中第一个<p>元素。接着通过classList属性添加了dynamic-class样式类到该元素上，这样该元素就可以展示出我们动态创建的样式了。

这是一个简单的动态样式类封装JS代码实现的示例，它可以实现简单的样式变化效果。实际应用中，可以根据自己的需要创建更加复杂的动态样式类，实现更加丰富多彩的页面效果。