我目前正在使用Codecademy上的'Modifying HTML Elements' jQuery课程,它正在引导您使用jQuery修改CSS。我只是想知道通过这种方法修改CSS是否有好处,而不仅仅是编辑实际的CSS文件?
答案 0 :(得分:4)
有一个巨大的好处,您可以在页面中动态修改代码中的CSS,例如,响应用户的某些操作。例如。用户按下按钮,您将按钮的color
更改为red
。
您应该使用CSS文件设置页面的基本样式,然后在代码中使用jQuery为页面添加动态并更改样式以响应某些事件,如用户交互或Web请求。
提示最好的方法之一是只使用CSS文件中定义的CSS类。如果您需要将按钮的color
更改为red
,请在CSS文件中创建一个类
button.pressed {
color: red;
}
使用jQuery添加/删除该类,而不是直接修改CSS。通过这种方式,您可以在CSS文件中使用所有样式,并且在代码中只使用类,这样可以使代码更清晰。
这可能有点先进,但要记住它!
答案 1 :(得分: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">«</button>
<button id="right">»</button>
<div class="block"></div>
&#13;