jquery的css操作

时间：2022-09-07 11:14

.css()——获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性；

.hasClass()——确定任何一个匹配元素是否有被分配给定的（样式）类；

.addClass()——为每个匹配的元素添加指定的样式类名；

.removeClass()——移除集合中每个匹配元素上一个，多个或全部样式；

.toggleClass()——在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>添加元素&删除元素</title>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/css.js"></script>
    <style>
        .divStyle{
            width:800px;
            height: 25px;
            background-color: #1abc9c;
        }
    </style>
</head>
<body>
<div id="div1">
    获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个CSS属性。
</div>

</body>
</html>

$(document).ready(function(){
    //$("#div1").css({
    //    width:"700px",height:"25px",backgroundColor:"#01C5FF"
    //});
    //$("#div1").addClass("divStyle");
    //$("#div1").removeClass("divStyle");
    $("#div1").click(function(){
        $(this).toggleClass("divStyle");
    })
})