7.jQuery样式操作

最新推荐文章于 2022-09-01 16:58:04 发布

肝JOJO

最新推荐文章于 2022-09-01 16:58:04 发布

阅读量100

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_34620296/article/details/103657378

版权

jQuery 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.操作css方法
    jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式
    代码示例:

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: plum;
            transform: rotate(260dge);
        }
    </style>
    <script src="jQuery.js"></script>
    
    <body>
    <div class="current"></div>
	</body>

        $(function(){
            console.log($("div").css("width")); //参数只写属性名,返回属性值
            $("div").css("width","300px");//参数是属性名,属性值,是设置一种样式,属性名要加"",
            $("div").css({
                width: 400,
                height:400,
                backgroundColor:"red",  //驼峰命名法
            })  //参数以对象形式,方便设置多组样式. 属性名和属性值用冒号隔开
        })

2.设置类样式方法
    添加,移除,切换
    代码示例:

        $(function(){
            $("div").click(function(){
                $(this).addClass("current");  //点击div给他添加类
                $(this).removeClass("current");  //点击删除类
                $(this).toggleClass("current");  //点击切换类 (有就删除,没有就加上)
            })
        })

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.jQuery样式操作

1.操作css方法 jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式代码示例: <style> div { width: 200px; height: 200px; background-color: pink; } ...
复制链接

扫一扫

专栏目录