jQuery基础知识，动态添加删除CSS样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jQuery动态添加删除CSS样式</title>

    <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#btn1").click(function() {

                $('#txtContent').addClass('red'); //追加样式

            });

            $("#btn2").click(function() {

                $('#txtContent').removeClass('red'); //移除样式

            });

            $("#btn3").click(function() {

                $('#txtContent').addClass('red weight family'); //追加多个样式

            });

            $("#btn4").click(function() {

                $('#txtContent').removeClass('red weight'); //移除多个样式

            });

            $("#btn5").click(function() {

                $('#txtContent').removeClass(); //移除所有样式

            });

        });

    </script>

    <style type="text/css">

        .default {

            font-size: 30px;

        }

        .red {

            color: red;

        }

        .weight {

            font-weight: bold;

        }

        .family {

            font-family: "华文隶书"

        }

    </style>

</head>

<body>

    <div id="txtContent" class="default">你好呀！jQuery基础知识！</div><br />

    <input id="btn1" type="button" value="追加样式" />

    <input id="btn2" type="button" value="移除样式" />

    <input id="btn3" type="button" value="追加多个样式" />

    <input id="btn4" type="button" value="移除多个样式" />

    <input id="btn5" type="button" value="移除所有样式" />

</body>

</html>

jQuery动态追加移除CSS样式的更多相关文章

  1. jQuery 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

  2. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  3. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  4. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  5. JQ添加移除css样式

    1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...

  6. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  7. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  8. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  9. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

随机推荐

  1. Poj_1088_滑雪(DP)

    一.Description(poj1088) Michael喜欢滑雪百这并不奇怪,  因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载 ...

  2. .NETFramework：DateTimeOffset

    ylbtech-.NETFramework:DateTimeOffset 表示一个时间点,通常相对于协调世界时(UTC)的日期和时间来表示. 1.程序集 mscorlib, Version=4.0.0 ...

  3. eclipse(java)&nbsp;使用SQL&nbsp;…

    java连接sqlserver2005数据库   首先得下载驱动程序到微软网站下载Microsoft JDBC Driver 4.0 for SQL Server 下载地址 :http://msdn. ...

  4. maven导入jar包失败

    找到原来的jar包位置,删除,然后重新导入,还是未成功.采取了网上的各种办法,还是不行.最简单的办法就是,重装下eclipse,以及maven配置.

  5. Web.config中的设置 forms 中的slidingExpiration的设置

    在ASP.NET 网站中,使用 Forms Authentication时,一般的设置是如下的: <authentication mode="Forms"> <f ...

  6. SqlServer2012——多表连接查询

    1.基本连接 select A.姓名,A.性别,B.班级名,B.家庭住址 From 学生信息 A,班级信息 B where A.所属班级=B.班级编号 --把A表与B表连接起来 2.内连接 --内连接 ...

  7. JAVA企业级开发-xml基础语法&约束&解析(04)

    一.什么是xml html:超文本标记语言.它主要是用来封装页面上要显示的数据,最后通过浏览器来解析html文件,然后把数据展示在浏览器上.同样我们可以使用JS和DOM技术对html文件进行解析和操作 ...

  8. Oracle数据库恢复之resetlogs

    实验环境:RHEL 5.4 + Oracle 11.2.0.3 如果是一名合格的Oracle DBA,对resetlogs这种关键字都应该是极其敏感的,当确认需要这种操作时一定要三思而后行,如果自己不 ...

  9. Weekly Contest 112

    945. Minimum Increment to Make Array Unique Given an array of integers A, a move consists of choosin ...

  10. Animation Blueprint, Set Custom Variables Via C++

    https://wiki.unrealengine.com/Animation_Blueprint,_Set_Custom_Variables_Via_C%2B%2B Animation Bluepr ...