通过 Javascript 更改 CSS 样式而不使用类是不好的做法吗？

Question

$('.desktop_search').css({
    visibility: 'visible',
    width: '100%',
    opacity: '1'
});

例如，我正在desktop_search使用上面的 JS 更改带有类的元素。首先在我的 CSS 样式表中提供所有这些 CSS 并直接执行会更好吗？toggleClass(new_class_name)或者如果我执行上述操作，情况是否相同？我这样问是因为我使用 JS 更改了很多 CSS 样式，我担心它可能会影响我的性能。我使用的大部分 JS 是在单击特定元素或滚动页面等时更改 CSS。

编辑：

更多细节。例如，当我单击which is时，我希望一个元素this_element_will_expand从 展开width: 0为。因此，我将使用这个JS：width: 100%trigger_a_elementa

$('.trigger_a_element').click(function() {
    if ($('.this_element_will_expand').css('width') == 0)
        $('.this_element_will_expand').css('width', '100%');

    else
        $('.this_element_will_expand').css('width', '');
});

Answer 1

要回答使用 JavaScript 设置内联样式与使用样式表之间的“性能”问题，需要考虑以下几点。

重绘：两者之间的差异可以忽略不计。人们实际上可能会争辩说，内联样式实际上比样式表具有性能改进，但它不应该成为应用程序中的瓶颈。

页面刷新：浏览器将缓存样式表和 JavaScript。所以它们都应该在页面加载时表现良好。

所以我认为这不是一个性能问题，而是一个可维护性问题。拥有一个 css 类来存储您计划反复使用的样式是否更容易？我认为是的。如果您设置的内联样式非常特定于一个用例，那么我认为在 javascript 中维护内联样式会更容易。