在jQuery中操作元素为了加快速度，或者书写速度，可以用到json的格式：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>08jQuery操作元素对象的样式A</title>

		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>

		<style type="text/css">

			#div1{

				width: 200px;

				height: 200px;

				border: 3px solid chartreuse;

			}

		</style>

		<script>

		$(function(){

			//获取div

			var div=$("#div1");

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

				alert(div.css("width")+"<--->"+div.css("height")+"<--->"+div.css("border")+"<--->"+div.css("background-color"));

			})

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

				//操作单一属性

				div.css("width","300px");

				//json集体操作  {key1:value1,key2:value2}

				div.css({

					'height':'300px',

					'background-color':'red',

					'border':'5px solid chartreuse'

				})

			})

		})

		</script>

	</head>

	<body>

		<div id="div1">

		</div>

		<hr />

		<p>

			<input type="button" id="show" value="显示div样式" />

		</p>

		<p>

			<input type="button" id="caozuo" value="更改div样式" />

		</p>

	</body>

</html>

添加样式有俩种方法。第一种：

$("#div1").attr("class","div1");

第二种是通过addclass直接添加，但是只能通过class去添加：

$("#div1").addClass("div1");
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>

		<style>

			#div1{

				width: 500px;

				height: 500px;

				border: 3px solid chartreuse;

			}

			.div1{

				background-image: url(img/f0ac09301e73d6d6.jpg);

				background-position: center;

				background-repeat: no-repeat;

				background-color: aqua;

			}

		</style>

		<script>

			$(function(){

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

					//第一种通过class添加样式(也可以通过其他的方式添加样式，不一定非要是class。)

					$("#div1").attr("class","div1");

					//第二种通过class添加样式(只能通过class去添加样式)

					$("#div1").addClass("div1");

				})

			})

		</script>

	</head>

	<body>

		<div id="div1">

		</div>

		<hr />

		<input type="button" id="add" value="通过class添加div属性"/>

	</body>

</html>

jQuery操作元素对象的样式的更多相关文章

  1. 转：jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  2. 使用jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  6. 《从零开始学习jQuery》：用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  7. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  8. jQuar总结10:jQuery操作元素的属性

    jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...

  9. jQuery操作元素的class属性

    今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...

随机推荐

  1. 2019年10月13日 计算机英语习题 wangqingchao

    Match the explanations in Column B with words and expressions in Columna. (搭配每组中意义相同的词或短语) Types of ...

  2. Python字典 你必须知道的用法系列

    本文Python版本为3.7.X,阅读本文之前需了解python字典的基本用法. 介绍 字典(dict)是Python中内置的一个数据结构,由多个键值对组成,键(key)和值(value)用冒号分隔, ...

  3. HTML 转 PDF 之 wkhtmltopdf

    wkhtmltopdf是一个可以把html转为pdf的插件,有windows.linux等平台的版本,比较简单 官网下载 https://wkhtmltopdf.org/downloads.html  ...

  4. MySQL InnoDB 实现高并发原理

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  5. nyoj 813-对决 (i*j == k)

    813-对决 内存限制:64MB 时间限制:1000ms 特判: No 通过数:11 提交数:23 难度:0 题目描述: Topcoder 招进来了 n 个新同学,Yougth计划把这个n个同学分成两 ...

  6. opencv 6 图像轮廓与图像分割修复 2 使用多边形将轮廓包围

    使用多边形将轮廓包围 返回外部矩阵边界(boundingRect()函数) 寻找最小包围矩形(minAreaRect()函数) 寻找最小包围圆形(minEnclosingCircle函数) 用椭圆拟合 ...

  7. 攻克数通，斩获云计算！誉天Double HCIE学员考证秘笈揭晓

    不知不觉,已经过了四个月的时间了,我是六月多报名云计算的,本来是奔着邹Sir去的,但是当时邹sir已经上到HCIE的课程了,只能蹭学弟之前的录屏看.等到七月八号,又正式跟了曾曦老师上了一次完整的课程. ...

  8. 组长组——“多彩夕阳”APP评价

    基于NABCD评论,及改进建议 一.组长组NABCD: N-需求背景: (1)我国老龄化日益加重,已突破两亿.目前人数还在增加,解决老年福祉成为社会关注的民生话题. (2)智能手机越来越普遍,老年人已 ...

  9. 如何使用C#调用C++类虚函数（即动态内存调用）

      本文讲解如何使用C#调用只有.h头文件的c++类的虚函数(非实例函数,因为非虚函数不存在于虚函数表,无法通过类对象偏移计算地址,除非用export导出,而gcc默认是全部导出实例函数,这也是为什么 ...

  10. k8s Ingress 理解和部署

    目录 前言 Ingress 与 ingress-controller Ingress 部署 1.部署 ingress-controller 2.部署测试 web 服务 3.部署 Ingress 4.检 ...