jQuery - 点击图片加边框

最新推荐文章于 2023-12-28 16:16:28 发布

转载最新推荐文章于 2023-12-28 16:16:28 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xtdxs/p/6613579.html

文章标签：

#javascript #java #ViewUI

本文介绍了一种通过jQuery实现点击图片后为其添加边框的方法。提供了两种方式：一是使用css()方法直接设置样式；二是利用addClass()方法添加预定义的CSS类。此教程适合初学者了解如何使用jQuery进行简单的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为图片添加边框</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        //方法1 使用css()方法
//        $(function(){
//            $("img").eq(0).click(function(){
//                $(this).css("border","1px solid red");
//            })
//        })
        //方法2 使用addClass（）方法
        $(function(){
            $("img").click(function(){
                $(this).addClass('border');
            })
        })

    </script>
    <style type="text/css">
        .border{border:1px solid #ccc;}
    </style>
</head>
<body>
<img src="./images/pic.gif" />
</body>
</html>