jQuery元素样式操作

最新推荐文章于 2024-11-11 11:10:09 发布

转载最新推荐文章于 2024-11-11 11:10:09 发布 · 142 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/johnvwan/p/9585199.html

文章标签：

#javascript #ViewUI

在页面中，元素样式的操作包含：直接设置样式、增加 CSS 类别、类别切换、删除类别几部分。下面通过示例介绍其使用的语法和方法。

一.直接设置元素样式值

在 jQuery 中，可以通过 css() 方法为某个指定的元素设置样式值，其语法格式如下所示：

css(name, value)

其中 name 为样式名称，value 为样式的值。下例演示了如何调用 css(name,value) 方法直接设置元素的值。

<!doctype html>
<html>

<head>
    <title>直接设置元素样式值 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 15px
        }

        p {
            padding: 5px;
            width: 220px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("p").click(function () {
                $(this).css("font-weight", "bold");         //字体加粗
                $(this).css("font-style", "italic");        //斜体
                $(this).css("background-color", "#eee");    //增加背景色
            })
        })
    </script>
</head>

<body>
    <p>Write Less Do More</p>
</body>

</html>

二.增加元素 CSS 类别

通过 addClass() 方法增加元素类别的名称，其语法格式如下：

addClass(class)

其中，参数 class 为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：

addClass(class0 class1 ...)

以下示例演示了如何通过调用 addClass(class0) 为页面中的元素增加 CSS 类别。

<!doctype html>
<html>

<head>
    <title>增加 CSS类别 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 15px
        }

        p {
            padding: 5px;
            width: 220px
        }

        .cls1 {
            font-weight: bold;
            font-style: italic
        }

        .cls2 {
            border: solid 1px #666;
            background-color: #eee
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("p").click(function () {
                $("p").click(function () {
                    $(this).addClass("cls1 cls2");//同时新增两个样式类别
                })
            })
    </script>
</head>

<body>
    <p>Write Less Do More</p>
</body>

</html>

三.切换元素 CSS 类别

通过 toggleClass() 方法切换不同的元素类别，其语法格式如下：

toggleClass(class)

其中，参数 class 为类别名称，其功能是当元素中含有名称为 class 的 CSS 类别时，删除该类别，否则增加一个该名称的 CSS 类别。如下示例演示了通过调用 toggleClass() 方法切换元素 CSS 的类别。

<!doctype html>
<html>

<head>
    <title>类别切换 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
    </script>
    <style type="text/css">
        .clsImg {
            border: solid 1px #666;
            padding: 3px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("img").click(function () {
                $(this).toggleClass("clsImg"); //切换样式类别
            })
        })
    </script>
</head>

<body>
    <img src="Images/logo.gif" alt="" title="jQuery" /> </body>

</html>