前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）

最新推荐文章于 2023-08-21 13:55:36 发布

Kkh_8686

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量415

点赞数

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

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

版权

web端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

服务器

14 篇文章 0 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

属性操作：更换图片、改变字体样式

1、更换图片：

在jQuery中，我们可以使用attr()方法来获取元素的某一个HTML属性值。
语法：

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

说明：获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var flag = true;
            $("#btn").click(function(){
                if(flag){
                    $("#pic").attr("src", "../practice/image/比卡超2.jpg");
                    flag = false;
                }else{
                    $("#pic").attr("src", "../practice/image/喷火龙.jpg");
                    flag = true;
                }
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="../practice/image/喷火龙.jpg" />
</body>
</html>

运行效果：
未点击前：

点击后：

2、添加、删除文字样式属性

说明：在jQuery中，我们可以使用attr()方法来删除元素的某个属性，我们可以使用removeAttr()方法来删除元素的某个属性。

语法：

// 添加属性
$().attr("属性名")
// 删除属性
$().removeAttr("属性名")

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .content{color:green;font-weight:bold;}
    </style>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn_add").click(function(){
                $("p").attr("class", "content");
            });
            $("#btn_remove").click(function () {
                $("p").removeAttr("class");
            });
        })
    </script>
</head>
<body>
    <p>古天乐变绿了</p>
    <input id="btn_add" type="button" value="添加样式" />
    <input id="btn_remove" type="button" value="删除样式" />
</body>
</html>

运行效果：

点击前：
点击添加样式后：
点击删除样式后：

Kkh_8686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）

属性操作：更换图片、改变字体样式1、更换图片：在jQuery中，我们可以使用attr()方法来获取元素的某一个HTML属性值。语法：$().attr("属性名")说明：获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <
复制链接

扫一扫