使用jQuery修改CSS的好处

3

我目前正在学习Codecademy上的'修改HTML元素'jQuery课程,它通过演示如何使用jQuery修改CSS。我想知道通过这种方法修改CSS是否比直接编辑CSS文件有益?


1
嗯...... 是和不是......通常更好的方法是添加/删除类,这样你就可以把设计留给CSS处理。但从另一个角度来说,简单的显示/隐藏功能或移动某些东西可能更适合在代码中实现,因为它与设计关系不大。而且用JS修改它意味着每次页面加载都会被修改,而如果你只是在CSS样式表中修复它,它就会立即得到修复。 - Kevin B
2个回答

4
在您的代码中,有一个巨大的优势,您可以在页面内动态修改CSS。例如,响应用户的某些操作。例如,用户按下按钮时,您可以将按钮的颜色更改为红色。
您应该使用CSS文件设置页面的基本样式,然后在您的代码中使用jQuery来为页面添加动态效果,并在响应某些事件(如用户交互或Web请求)时更改样式。
提示:最好的方法之一是仅使用在CSS文件中定义的CSS类。如果您需要将按钮的颜色更改为红色,请在您的CSS文件中创建一个类。
button.pressed {
    color: red;
}

使用jQuery添加/删除类,而不是直接修改CSS。这样您可以将所有样式保存在CSS文件中,并在代码中仅使用类,这使代码更清洁。
这可能有点高级,但请记住!

感谢您的解释和建议,我非常感激。 - ryanmaddock

3
通过jQuery修改CSS可以根据用户交互或其他事件/状态改变元素的样式,例如更改无效表单输入的样式。
通过jQuery修改CSS的最佳用例之一是动画化元素的位置。这在一定程度上得益于jQuery根据元素当前属性更改CSS属性的能力。请参见下面的示例。
话虽如此,在许多情况下,最好将类应用于元素并使用CSS为该特定类设置样式。可以根据需要切换类的状态,从而避免在jQuery中重置CSS样式。

$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block"></div>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接