动态 CSS 样式和动画 - Jquery 插件

下载

您可以从 github 下载源代码。

引言

CSS 脚本在为 HTML DOM 对象设置样式和设置动画方面非常酷。您可以将相同的样式应用于多个元素，从而创建出色的网页。但是，将这些样式应用于多个对象时，如果没有创建另一个 CSS 类，就没有办法应用特定于对象的特定值。

/*creating class for some objects*/
.style1{
    width : 100%;
}

/*creating another class for another object to change one property*/
style2{
    width : 50%;
}

LESS 和 SASS（CSS 预处理器）试图通过创建变量、继承和其他预处理器代码优化来解决一些问题，但最终结果是添加到网页的静态类型的 CSS 脚本。

问题

（直到现在）没有办法在 CSS 中创建特定于元素的特定值，因为它只有一种方式（选定的元素会受到类内属性的影响）。但您无法为每个元素生成特定值。

解决方法

如果我们想创建特定于元素的特定值，我们可以使用以下方法：

• 创建多个 CSS 类。
• 使用预处理器
• 将内联样式应用于元素的 style 属性。
• 使用 JavaScript 更改样式属性。
• 使用 jquery 将样式应用于目标元素。

但是……

当变体数量较少时，创建多个 CSS 类是可行的，但当有 10、20 个……或更多元素时，您将沉浸在具有相同功能的类中:( :( 。

内联样式对于仅一个与其他对象不同的对象来说是可行的。而且，您还失去了选择器的强大功能。

JavaScript 本身很难处理选择器和为每种浏览器编写前缀。

在我看来，jquery 是最适合这项工作的工具。它内置了选择器系统，而且它是一个 JavaScript 库，所以您处于计算环境中，可以处理元素，从而使元素能够影响 CSS 样式值，样式也能影响元素布局，而且它还有一个跨浏览器的 .css 属性，消除了前缀的麻烦。
 

    动态 CSS 插件

在开始编写代码之前，需要注意的是，jquery 可以为选定的元素生成 CSS 值，但这很困难且需要管理，而这正是 Dynamic-CSS 所做的。

下载和安装

1. 在您的 IDE 中创建一个新项目或新文件
2. 添加 index.html
3. 下载 jquery
4. 在 index.html 中包含脚本
5. 下载插件
6. 在 index.html 中包含
7. 添加一个新的空
   © . All rights reserved.