AI编程助手
AI免费问答

jQuery如何动态添加删除CSS样式?(代码示例)

青灯夜游   2019-11-28 15:15   2522浏览 转载

jQuery动态追加和移除CSS样式,有两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个实例讲解用法。

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>jQuery动态添加删除CSS样式</title>
    <script></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function() {
                $(&#39;#txtContent&#39;).addClass(&#39;red&#39;); //追加样式
            });
            $("#btn2").click(function() {
                $(&#39;#txtContent&#39;).removeClass(&#39;red&#39;); //移除样式
            });
            $("#btn3").click(function() {
                $(&#39;#txtContent&#39;).addClass(&#39;red weight family&#39;); //追加多个样式
            });
            $("#btn4").click(function() {
                $(&#39;#txtContent&#39;).removeClass(&#39;red weight&#39;); //移除多个样式
            });
            $("#btn5").click(function() {
                $(&#39;#txtContent&#39;).removeClass(); //移除所有样式
            });
        });
    </script>
    <style>
        .default {
            font-size: 30px;
        }
        .red {
            color: red;
        }
        .weight {
            font-weight: bold;
        }
        .family {
            font-family: "华文隶书"
        }
    </style>
    <div>你好呀!jQuery基础知识!</div><br>
    <input>
    <input>
    <input>
    <input>
    <input>

推荐学习: jQuery视频教程

前端入门到VUE实战笔记:立即学习
>在学习笔记中,你将探索 前端 的入门与实战技巧!

声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除