jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个小例子讲解用法。
<!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样式的更多相关文章
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字（转载）
原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
- jquery动态添加/删除 tr/td
<head runat="server"> <title></title> <!--easyui --> <link rel= ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery动态添加 删除 操作实现
这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...
随机推荐
- 2、Numpy常用函数
创建单位矩阵和读写文件使用eye()创建单位矩阵 # -*- coding: utf-8 -*- import numpy as np i = np.eye(3) print(i) 结果: [[ 1. ...
- asp.net MVC中的@model与Model
asp.net MVC中的@model与Model https://blog.csdn.net/ydm19891101/article/details/44301201 在MVC的实际使用中,我们经常 ...
- mac 配置charles
从官网下载链接http://www.charlesproxy.com/download 附上注册码: Registered Name: https://zhile.io License Key: 48 ...
- DP设状态 : 状压与线
[NOIP2017]宝藏(状压) [AHOI2009]中国象棋(状压) [BZOJ1814] URAL1519 Formula 1(插头\(DP\)模板) 新链接 : Luogu5056 , dark ...
- 119th LeetCode Weekly Contest Largest Perimeter Triangle
Given an array A of positive lengths, return the largest perimeter of a triangle with non-zero area, ...
- 关于jstl taglib的错误 Can not find the tag library descriptor for “http://java.sun.com/jstl/core”
在查了N个帖子之后,决定记录一下关于jstl taglib的配置方法. 首先我遇到的错误是: Can not find the tag library descriptor for "htt ...
- 【Python】探测网站是否可以访问
首先贴上简陋的python脚本 #coding:utf-8 import urllib,linecache for line in linecache.updatecache('url.txt'): ...
- PIE SDK专题制图下地图的的操作
1. 功能简介 制图模式和地图模式下用的地图是同一份地图,那么在制图模式下如果需要对地图进行操作(例如地图的拉框放大,缩小),那么该如何操作呢,地图范围视图变化在制图模式下该如何监听呢,下面主要 ...
- Farey Sequence（欧拉函数板子题）
题目链接:http://poj.org/problem?id=2478 Farey Sequence Time Limit: 1000MS Memory Limit: 65536K Total S ...
- (转)Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
原文:http://blog.51cto.com/freeloda/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Ng ...