前端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" />
    <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>

运行效果:

  • 未点击前:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第1张图片
  • 点击后:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第2张图片

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>

运行效果:

  • 点击前:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第3张图片
  • 点击后:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第4张图片

代码分析:

  • $(“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");

代码运行,点击后的效果:
前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第5张图片

二、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>

运行效果:

  • 点击前:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第6张图片
    点击后:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第7张图片

三、CSS个别样式操作

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

1、元素的宽高

  • 在jQuery中,如果想要获取和设置一个元素的宽度和高度,我们可以使用css()方法来实现。不过为了更加灵活地操作元素的宽高,jQuery为我们另外提供了更多更加强大的方法。
  • 在jQuery中,如果我们想要“获取”和“设置”元素的宽高,共有3组方法:
    (1)width()和height()
    (2)innerWidth()和innerHeight()
    (3)outerWidth()和outerHeight()
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第8张图片
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第9张图片

语法:

$().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>

运行效果:

  • 点击设置前:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第10张图片
  • 点击获取前:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第11张图片
  • 点击设置:
    前端HTML调用jQuery库,CSS样式操作:CSS属性操作、类名操作、个别样式操作(前端:HTML搭配jQuery系列教程七)_第12张图片

你可能感兴趣的:(web端,服务器,flask,javascript,css,html5,jquery,html)