1

我的 JavaScript 代码中“散布”了 CSS 样式属性。

这是一个示例行：

label_element.style.opacity = 0;

我计划将所有 CSS 从代码中移出，除了 className 更改。

例如，如果我需要使用 JavaScript 动态更改某些 CSS，我计划将更改合并到 className 更改，如下所示：

.new_class{
    label_element.style.opacity = 0;
}

因此，要动态更改 CSS，所有更改都是通过类更改进行的，如下所示：

div_el.className = "new_class";

所有 CSS 都以这种方式保留在 CSS 文件中。JavaScript 只能访问类名。

我想验证/验证这是一个很好的方法。

4

5 回答 5

2

我想建议使用一些简单的辅助函数来添加/删除类，而不是附加类名：

Element.prototype.hasClass = function(name){
    return RegExp('(\\s|^)' + name, 'g').test(this.className);
};
Element.prototype.addClass = function(name){
    if(!this.hasClass(name))
        this.className += (this.className ? ' ' : '') + name;
};
Element.prototype.removeClass = function(name){
    this.className = name ? this.className.replace(RegExp('(\\s|^)' + name, 'g'), '') : '';
};

在这里演示：http: //jsfiddle.net/EdAEB/

于 2013-06-26T14:50:05.780 回答
1

是的，正如您可能从评论中得到的那样，这是首选的做法。不过，有一点要说：

elem.className = 'foobar';

与多个班级合作时可能并不理想，最好安全行事并选择：

elem.className += ' foobar';

当然，在这样的情况下：

window.addEventListener('click', function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'p' && target.className.test(/\btoggle\b/))
    {
        target.style.display = target.style.display === 'hidden' ? 'block' : 'hidden';
    }
}, false);

你可以为此使用一个类，但我觉得切换在 CSS3 中是可行的，你现在可以保留这样的代码，以支持旧版浏览器。

于 2013-06-26T14:27:36.493 回答
1

大约 6 个月前，我正在使用以下过程：

  1. 声明一个名为 classes 的数组
  2. 使用函数从数组中添加、删除项目。数组的每一项都是一个css类
  3. 然后用空格连接数组的元素，得到一个字符串，如：“class1 class2 class3 class4”。
  4. 将类字符串直接或间接应用于元素的 className 属性，如下所示：

document.getElementById('anyElementID').className = classesArray.join(" ");

现在，您不必这样做，您可以简单地使用最近添加的 DOM classList API，它具有 add、remove、toggle 和 contains 方法。

给你：http ://davidwalsh.name/classlist

祝你今天过得愉快！

于 2013-06-26T14:56:36.817 回答
0

我需要在这里反对谷物..

在 CSS 文件中包含所有样式的主要缺点之一是在需要计算样式值的情况下。我们遇到的一个真实世界的例子是一个可调整大小的对话框。当我们更改浏览器窗口的大小时，需要计算样式值（宽度和高度）。我们遇到了很多其他需要计算样式值的情况，所以最后我们遇到了一些 CSS 在 CSS 文件中，一些在 Javascript 中的情况。这不漂亮。

在更人性化的层面上，我发现将所有样式存储在 CSS 文件中会破坏 OO 封装原则。如果我有特定对象的特定样式，那么这些特定样式应该与该特定对象一起保留。随着我们的项目变得越来越大，我们的 CSS 文件变得非常丑陋。

于 2013-06-26T15:10:00.013 回答
-1

我不能同意...

这取决于javascript必须做什么。有时上课更好，但不是每次都上课。复杂的布局可能会向您的 css 文件发送垃圾邮件。您正在尝试清理您的 javascript 代码，但请考虑一下。效果也可以反转。例如小部件和插件。一些插件需要自己的 css 文件。有些需要一个以上的文件。它会使文件结构变得混乱。而且当更多人在一个项目上工作时，由于文件结构过于复杂和类引用过多，维护、修改或修复错误就变得更加困难......

我为我在 javascript 中所做的每个样式更改单独解决了这个问题。对我来说更重要的是让代码易于阅读和维护，然后变得严格。

于 2013-06-26T14:45:04.053 回答