javascript - 参数化 jQuery addClass？

Question

是否可以通过某种方式参数化 jQuery addClass() 方法？ 比如，有一个带有颜色属性的 css 类，该颜色属性是在调用 addClass() 方法时设置的？

我希望这是有道理的，因为我对 JavaScript 和 CSS 还很陌生。如果它很重要，我正在努力扩展 MediaWiki 可视化编辑器。此方法用于立即显示/呈现在编辑器中所做的更改。但是我找不到需要参数化的例子。

如果不可能，我很想知道该怎么做。

如果不是，也许有人可以建议如何以另一种方式实现我想要的东西？

编辑:

这是当前状态: 当我向文本添加一些注释时，假设是一个 languageAnnotation，这称为:

this.$element
    .addClass( 've-ce-languageAnnotation' )
    .addClass( 've-ce-bidi-isolate' )
    .prop( {
        lang: this.model.getAttribute( 'lang' ),
        dir: this.model.getAttribute( 'dir' ),
        title: this.constructor.static.getDescription( this.model )
    } );

这是 ve-ce-languageAnnotation:

.ve-ce-languageAnnotation {
border-bottom: 1px dashed #ccc;
background-color: #ebf3f5;
}

这是 ve-ce-bidi-isolate:

.ve-ce-bidi-isolate {
unicode-bidi: isolate;
unicode-bidi: -moz-isolate;
unicode-bidi: -webkit-isolate;
}

我将其解释为 prop() 函数设置了某种参数。所以这就是我为我的 textColor 注释所尝试的:

     this.$element
    .addClass( 've-ce-textColorAnnotation' )
    .prop( {
        color: this.model.getAttribute( 'style' ),
        title: this.constructor.static.getDescription( this.model )
    } )
    ;

使用 ve-ce-TextColorAnnotation:

.ve-ce-textColorAnnotation {
    color: red;
}

这总是产生红色。当我尝试输入其他内容而不是合法颜色时，没有任何反应。

Edit2:我想一个选择是为每种可能的颜色创建一个类，并根据参数添加正确的类？像这样:

var color = this.model.getAttribute('style');
if (color == 'blue') {
    this.$element.addClass( 'blueText' )
} else if (...

但这看起来不是一个好主意。

编辑 3:According to the top answer in this question ，我想要的是不可能的 - 但我可以通过使用 this.$element.css('attr', 'value') 直接应用属性而不使用类。我想我可以用它来满足我的需要。

Answer 1

看来您只是想设置一种颜色，而不是添加一个类。 HTML 中的类可用于样式化或 DOM 导航，但在您的情况下，您只想对元素应用不同的颜色。您不需要为此使用类，尤其是在颜色是动态的情况下。

你要做的是调用 jquery 的 .css() 方法。它可以像这样与单个参数一起使用:

element.css({
  'color': 'black',
  'height': '100px'
});

或多个，如果您只想编辑一个属性:

element.css('color', 'black');

如果不使用 jQuery，您也可以这样做:

element.style.color = 'black';