Question

我目前正在使用Codecademy上的'Modifying HTML Elements' jQuery课程，它正在引导您使用jQuery修改CSS。我只是想知道通过这种方法修改CSS是否有好处，而不仅仅是编辑实际的CSS文件？

Answer 1

有一个巨大的好处，您可以在页面中动态修改代码中的CSS，例如，响应用户的某些操作。例如。用户按下按钮，您将按钮的color更改为red。

您应该使用CSS文件设置页面的基本样式，然后在代码中使用jQuery为页面添加动态并更改样式以响应某些事件，如用户交互或Web请求。

提示最好的方法之一是只使用CSS文件中定义的CSS类。如果您需要将按钮的color更改为red，请在CSS文件中创建一个类

button.pressed {
    color: red;
}

使用jQuery添加/删除该类，而不是直接修改CSS。通过这种方式，您可以在CSS文件中使用所有样式，并且在代码中只使用类，这样可以使代码更清晰。

这可能有点先进，但要记住它！

Answer 2

通过jQuery修改CSS允许您根据用户交互或其他事件/状态更改元素的样式。例如，更改无效表单输入的样式。

通过jQuery修改CSS的最佳用例之一是动画元素的位置。这部分归功于jQuery能够根据元素的当前属性更改CSS属性。请参阅下面的示例。

那就是说 ，在很多情况下，将类应用于元素并使用CSS来设置特定类的样式会更好。可以根据需要打开/关闭类，从而无需在jQuery中重置CSS样式。

＆＃13;

$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

＆＃13;

div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;

＆＃13;

<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>

＆＃13;

使用jQuery修改CSS的好处

2 个答案: