前端HTML调用jQuery库，CSS样式操作：CSS属性操作、类名操作、个别样式操作（前端：HTML搭配jQuery系列教程七）

最新推荐文章于 2022-08-29 20:29:12 发布

Kkh_8686

最新推荐文章于 2022-08-29 20:29:12 发布

阅读量408

点赞数

分类专栏： web端服务器 flask 文章标签： javascript css html5 jquery html

本文链接：https://blog.csdn.net/K_AAbb/article/details/116915985

版权

web端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

服务器

14 篇文章 0 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

CSS的样式操作，指的是使用jQuery来操作一个元素的CSS属性。在jQuery中，对于样式操作共有以下3种

（1）CSS属性操作
（2）CSS类名操作
（3）CSS个别样式操作

一、CSS属性操作

1、获取属性

在jQuery中，我们可以使用css()方法来获取一个CSS属性的取值。
语法：

$().css("属性名")

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p{font-weight:bold;}
    </style>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function(){
                var result = $("p").css("font-weight");
                alert("font-weight取值为：" + result);
            });
        })
    </script>
</head>
<body>
    <p>周星驰</p>
    <input id="btn" type="button" value="获取每个字体的宽度" />
</body>
</html>

运行效果：

未点击前：
点击后：

2、设置属性

在jQuery中，设置元素的某一个CSS属性的值，我们用的也是css()方法。不过对于css()方法，我们需要分两种情况来考虑：一种是“设置单个属性”；另外一种是“设置多个属性”。
语法：

//设置一个属性
$().css("属性", "取值")
//设置多个属性
$().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"})

说明：
当我们想要设置多个CSS属性时，使用的是对象的形式。其中属性与取值采用的是“键值对”方式，然后每个键值对之间用英文逗号隔开。

举一个例子说明：
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function(){
                $("li:nth-child(odd)").css("color","red");
            });
        })
    </script>
</head>
<body>
    <ul>
        <li>苏乞丐</li>
        <li>黄飞鸿</li>
        <li>叶问</li>
        <li>李小龙</li>
        <li>我是谁？</li>
    </ul>
    <input id="btn" type="button" value="设置" />
</body>
</html>

运行效果：

点击前：
点击后：

代码分析：

$(“li:nth-child(odd)”).css(“color”,“red”) 这段代码使用了子元素伪类选择器，表示选取ul元素下所有奇数个li元素，然后设置color属性值为red。

扩展：同时设置多个属性

只需要更改这段代码就OK了

 $("li:nth-child(odd)").css({"color":"red", "background-color":"silver", "font-weight":"bold"});

上面代码等价于下面代码：

$().css("color", "red);
$().css("background-color", "silver");
$().css("font-weight", "bold");

代码运行，点击后的效果：
在这里插入图片描述

二、CSS类别名操作

类名操作，指的是为元素添加一个class或删除一个class，从而整体控制元素的样式。在jQuery中，对于类名操作共有以下3种。
（1）添加class
（2）删除class
（3）切换class

1、添加class

在jQuery中，我们可以使用addClass()方法为元素添加一个class。

语法：

$().addClass("类名")

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .select
        {
            color:red;
            background-color:#F1F1F1;
            font-weight:bold;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function(){
                $("li:nth-child(odd)").addClass("select");
            });
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="添加" />
</body>
</html>

运行效果：

点击前：

点击后：

三、CSS个别样式操作

在jQuery中，对于类名操作共有以下3种。
（1）元素的宽高
（2）元素的位置
（3）滚动条的距离

1、元素的宽高

在jQuery中，如果想要获取和设置一个元素的宽度和高度，我们可以使用css()方法来实现。不过为了更加灵活地操作元素的宽高，jQuery为我们另外提供了更多更加强大的方法。
在jQuery中，如果我们想要“获取”和“设置”元素的宽高，共有3组方法：
（1）width()和height()
（2）innerWidth()和innerHeight()
（3）outerWidth()和outerHeight()

语法：

$().width()     //获取元素宽度
$().width(n)    //设置元素宽度，n是一个整数，表示n像素
$().height()     //获取元素高度
$().height(n)    //设置元素高度，n是一个整数，表示n像素

说明：

width()方法用于获取和设置元素的宽度，height()方法用于获取和设置元素的高度。
jQuery很多方法都有这样一个特点：没有参数的方法表示“获取”，带有参数的方法表示“设置”
代码：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #box1
        {
            display:inline-block;
            width:100px;
            height:60px;
            border:1px solid gray;
        }
        #box2
        {
            display:inline-block;
            width:150px;
            height:60px;
            border:1px solid gray;
        }
    </style>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn_get").click(function(){
                var width = $("#box1").width();
                alert(width);
            });
            $("#btn_set").click(function(){
                $("#box2").width(50);
            });
        })
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div><br />
    获取第1个框的宽度：<input id="btn_get" type="button" value="获取"/><br/>
    设置第2个框的宽度：<input id="btn_set" type="button" value="设置">
</body>
</html>

运行效果：

点击设置前：
点击获取前：
点击设置:

Kkh_8686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端HTML调用jQuery库，CSS样式操作：CSS属性操作、类名操作、个别样式操作（前端：HTML搭配jQuery系列教程七）

CSS的样式操作，指的是使用jQuery来操作一个元素的CSS属性。在jQuery中，对于样式操作共有以下3种（1）CSS属性操作（2）CSS类名操作（3）CSS个别样式操作一、CSS属性操作1、获取属性在jQuery中，我们可以使用css()方法来获取一个CSS属性的取值。语法：$().css("属性名")代码：<!DOCTYPE html><html><head> <meta charset="utf-8" />
复制链接

扫一扫

专栏目录