在不使用类的情况下通过Javascript更改CSS样式是一种糟糕的做法吗？

例如，我正在使用上面的JS使用class

desktop\u search

更改元素。首先在我的CSS样式表中提供所有这些CSS，然后只做

toggleClass（new\u class\u name）

会更好吗？或者，如果我做了上述操作，情况会一样吗？我这么问是因为我已经用JS改变了很多CSS样式，我担心这可能会影响我的性能。我使用的大多数JS是在单击特定元素或滚动页面时更改CSS，等等

编辑：

更多细节。例如，我想要一个元素

当我点击
触发一个元素
时，这个元素将从
宽度：0
扩展到
宽度：100%
。因此，我将使用以下JS：

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

我建议你根据工具的用途使用工具。例如，使用css进行样式设计，使用javascript进行动态内容，使用html进行结构化web。如果需要动态内容，您可以使用javascript更改css（如果没有必要，请不要总是使用javascript）
我建议您根据工具的用途使用该工具。例如，使用css进行样式设计，使用javascript进行动态内容，使用html进行结构化web。如果需要动态内容，您可以使用javascript更改css（如果没有必要，不要总是使用javascript）
当然最好使用
addClass/removeClass
，因为javascript不应该负责操纵样式。请参阅使用
addClass/removeClass肯定会更好，因为javascript不应该负责操纵样式。请参阅
近年来，尽可能避免使用JavaScript进行样式设计已成为良好的做法。特别是在移动设备上，CSS通常是硬件驱动的，而JavaScript可能会对处理器造成负担（这意味着CSS动画运行更快、更流畅）

定义样式和使用addClass/removeClass会更好，并且更具可扩展性。例如，如果您希望在多个地方发生这种情况，并且确切的样式在某个时刻发生变化，那么您可以在一个CSS类中更新它，而不是在JavaScript中多次更新它。
近年来，尽可能避免使用JavaScript进行样式设置已成为一种良好的做法。特别是在移动设备上，CSS通常是硬件驱动的，而JavaScript可能会对处理器造成负担（这意味着CSS动画运行更快、更流畅）

定义样式和使用addClass/removeClass会更好，并且更具可扩展性。例如，如果您希望在多个地方发生这种情况，并且确切的样式在某一点上发生变化，您可以在一个CSS类中更新它，而不是在JavaScript中多次更新。
回答“性能”问题在使用JavaScript设置内联样式与使用样式表之间有几点要考虑。

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

页面刷新：浏览器将缓存样式表和javascript。因此，它们都应该在页面加载时执行

因此，我认为这不是一个性能问题，而是一个可维护性问题。有一个css类来存储您计划反复使用的样式是否更容易。我认为是的。如果您设置的内联样式非常特定于一个用例，那么我认为在javascript中内联维护样式会更容易
 > P>回答使用JavaScript设置内联样式与使用样式表之间的“性能”问题有几个要点要考虑。
重画：两者之间的差别可以忽略不计。有人可能会争辩说，内联样式实际上比样式表有性能改进，但它不应该成为应用程序中的瓶颈

页面刷新：浏览器将缓存样式表和javascript。因此，它们都应该在页面加载时执行

因此，我认为这不是一个性能问题，而是一个可维护性问题。有一个css类来存储您计划反复使用的样式是否更容易。我认为是的。如果您设置的内联样式非常特定于一个用例，那么我认为在javascript中内联维护样式会更容易
 对于该特定示例，最好使用
toggleClass
。尽可能多地使用CSS进行样式设置。你会意识到，当你不得不用Javascript做一些事情的时候。不要担心性能，在这种情况下，用javascript设置样式只会影响性能，如果你这样做的话，比如每秒10次，否则就完全可以了。可能重复@kaido，我只是在更改CSS类已经提供的一些样式。大多数更改发生在我滚动或单击非按钮的元素（如单击
a
）等时。我实际上只是将样式从宽度
x
更改为宽度
y
，以使用JS模拟动画。@Kaido嗨，我添加了一个示例来说明我的意思。对于那个特定的示例，最好使用
切换类
。尽可能多地使用CSS进行样式设置。你会意识到，当你不得不用Javascript做一些事情的时候。不要担心性能，在这种情况下，用javascript设置样式只会影响性能，如果你这样做的话，比如每秒10次，否则就完全可以了
$('.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', '');
});