jQuery的CSS操作
.css()——获取匹配元素集合中的第一个元素的样式属性的值设置每一个匹配元素的一个或多个CSS属性。
.hasClass()——确定不论什么一个匹配元素是否有被分配给定的(样式)类;
.addClass()——为每一个匹配的元素加入指定的样式类名。
.removeClass()——移除集合中每一个匹配元素上一个,多个或所有样式;
.toggleClass()——在匹配的元素集合中的每一个元素上加入或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:假设存在(不存在)就删除(加入)一个类。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>加入元素&删除元素</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/css.js"></script>
<style>
.divStyle{
width:800px;
height: 25px;
background-color: #1abc9c;
}
</style>
</head>
<body>
<div id="div1">
获取匹配元素集合中的第一个元素的样式属性的值或设置每一个匹配元素的一个或多个CSS属性。
</div> </body>
</html>
$(document).ready(function(){
//$("#div1").css({
// width:"700px",height:"25px",backgroundColor:"#01C5FF"
//});
//$("#div1").addClass("divStyle");
//$("#div1").removeClass("divStyle");
$("#div1").click(function(){
$(this).toggleClass("divStyle");
})
})
jQuery的CSS操作的更多相关文章
- JQuery 之CSS操作
JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p" ...
- JQuery常用CSS操作
JQuery常用CSS操作 $(elem).css(obj):设置行内样式 $(elem).position():返回相对于父容器位置,只能获取不能设置 $(elem).offset(obj):返回相 ...
- jQuery基础--CSS操作、class操作、attr操作、prop操作
1.1.1 css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...
- 【JQuery】css操作
一.前言 接着上一章的内容,继续JQuery的学习 二.内容 css 设置或返回匹配元素的样式属性 $(selector).css(css-property-name) $(selec ...
- jquery之css操作
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery对css操作
1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);} ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
随机推荐
- 国内物联网平台初探(一) ——百度物接入IoT Hub
物接入IoT Hub - 架构 全托管的云服务,帮助建立设备与云端之间安全可靠的双向连接 支撑海量设备的数据收集.监控.故障预测等各种物联网场景 物接入IoT Hub - 功能 通信协议:支持MQTT ...
- 2018亚洲区预选赛北京赛站网络赛 D.80 Days 尺取
题面 题意:你带着K元要去n个城市,这n个城市是环形的,你可以选择任意一个起点,然后顺时针走,对于每个城市,到达时可以获得a元,但是从这里离开又需要花费b元,问你能否找到一个起点(输出花钱最少的那个) ...
- Polyfill 与 Shim
Polyfill 与 Shim polyfill 的概念是 Remy Sharp 在2010年提出的. polyfill,或 polyfiller ,表示为开发人员提供旧浏览器没有原生支持的较新功能的 ...
- pythonOCC版 瓶子代码
#!/usr/bin/env python # -*- coding:utf-8 -*- ##Copyright 2009-2015 Thomas Paviot (tpaviot@gmail.com) ...
- 【Oracle】ORA-01157: cannot identify/lock data file 201 - see DBWR trace file
今天数据库在查询数据的时候显示了这个错误: ORA-01157: cannot identify/lock data file 201 - see DBWR trace file ORA-01110: ...
- C# 2.0新加特性
泛型(Generics) 泛型是CLR 2.0中引入的最重要的新特性,使得可以在类.方法中对使用的类型进行参数化. 例如,这里定义了一个泛型类: class MyCollection<T> ...
- swift Self
'Self' is the type of a protocol/class/struct/enum.And the 'self' is a instance of a class/struct/en ...
- Sublime Text 3 Build 3047 安装/插件安装/C编程环境配置
Sublime Text 3 Build 3047 安装 参考:http://sublimetext.iaixue.com/forum.php?mod=viewthread&tid=29 插件 ...
- 绘画软件优动漫PAINT系统要求
优动漫PAINT对运行环境有什么要求呢?目前,该软件可在Windows系统和Mac系统上使用,详细的操作运行环境如下: 操作系统:win7.win8.win10. 计算机硬件:内存必须在2GB以上,建 ...
- 【转】【Oracle 集群】11G RAC 知识图文详细教程之RAC在LINUX上使用NFS安装前准备(六)
原文地址:http://www.cnblogs.com/baiboy/p/orc6.html 阅读目录 目录 介绍 下载软件 操作系统安装 Oracle安装先决条件 创建共享磁盘 参考文献 相关文章 ...