jQuery学习（4）—— CSS操作

最新推荐文章于 2022-03-18 22:56:51 发布

天道酬勤Fan

最新推荐文章于 2022-03-18 22:56:51 发布

阅读量109

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_42567323/article/details/102392127

版权

前言

记录一下学习的笔记。参考教程：jQuery菜鸟教程；jQuery中文文档。
在前面几篇博客中，对于样式的操作，我们主要用到了两个方法：addClass(),removeClass().这两个方法都是对样式进行统计添加或者删除。但如果我只想改变其中某一个CSS样式的话又该怎么办呢？jQuery提供了对CSS的操作。

一、jQuery操作CSS

jQuery对CSS的操作比较简单：

$().css('样式名称','样式值')

下面就来实现一个点赞的小实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: .0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js"  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="  crossorigin="anonymous"></script>
    <script>
        $('.item').click(function () {
           AddFavor(this);
        });

        function AddFavor(self) {
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;
            var tag = document.createElement('span');   //DOM对象
            $(tag).text('+1');
            $(tag).css('color','red');
            $(tag).css('fontsize',fontSize+'px');
            $(tag).css('position','absolute');
            $(tag).css('top',top+'px');
            $(tag).css('right',right+'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);
            var v = $(self);

            var obj = setInterval(function () {
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;
                $(tag).css('fontSize',fontSize+'px');
                $(tag).css('top',top+'px');
                $(tag).css('right',right+'px');
                $(tag).css('opacity',opacity);

                if (opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }

            },100)

        }
    </script>
</body>
</html>

注：这里涉及到了对CSS的操作。

		$(tag).css('fontSize',fontSize+'px');
        $(tag).css('top',top+'px');
        $(tag).css('right',right+'px');
        $(tag).css('opacity',opacity);