在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. PHP微信授权登录用于多个域名的方法

    PHP微信授权登录用于多个域名的方法appid和 回调地址换下就好了 <pre><!DOCTYPE html><html lang="en">& ...

  2. IP网段的判断

    一.    OSI七层模型 表示 说明 作用 应用层 HTTP.ftp 协议 表示层 UTF-8 将应用层协议翻译成计算机可识别的语言 会话层 管理传输层 传输层 TCP/UDP 建立以及断开连接 网 ...

  3. 如何提高web应用的吞吐量

    这篇博文所列举的优化手段是针对比较传统项目,但是想提高系统的吞吐量现在时髦的技术还是那些前后端未分离, 使用nginx当成静态资源服务器去代理我们的静态资源 是谁限制了Throughput? 当我们对 ...

  4. node真的是单线程模式吗

    提到node,我们就可以立刻想到单线程.异步IO.事件驱动等字眼.首先要明确的是node真的是单线程的吗,如果是单线程的,那么异步IO,以及定时事件(setTimeout.setInterval等)又 ...

  5. C#: 统计method的执行时间

    对于性能分析来说,无非是内存占用,CPU使用和执行时间. 那么,对于执行时间(elapsed times)的测量,需要强调的是,尽量不要使用DateTime类来,而是应该使用Stopwatch 类.M ...

  6. MySQL数据库的10大经典错误案例

    学习任何一门技术的同时,其实就是自我修炼的过程.沉下心,尝试去拥抱数据的世界! 案例一 Too many connections (连接数过多,导致连接不上数据库,业务无法正常进行) 问题还原: 解决 ...

  7. open-falcon监控系统

    官方文档 https://book.open-falcon.org/zh/intro/index.html 一.Open-Falcon介绍 1.监控系统,可以从运营级别(基本配置即可),以及应用级别( ...

  8. suseoj The wheat of the prime minister

    1202: 2018四川理工学院大学生ACM程序设计:The wheat of the prime minister 时间限制: 1 Sec  内存限制: 128 MB提交: 4  解决: 3[提交] ...

  9. Mirantis 收购 Docker | 云原生生态周报 Vol. 28

    作者 | 禅鸣.进超.心水.心贵 业界要闻 Docker 将 Docker Enterprise 卖给 Mirantis Mirantis 是一家扎根于 OpenStack 的云公司,最近专注于 Ku ...

  10. 如何打造一款m3u8视频爬虫

    0.前言 m3u8是一种很常见的网页视频播放器的视频源,比如说中国大学MOOC中课程就是使用了该种视频格式. 随便打开一门课程,就可以发现在网络请求中存在一个m3u8的文件,在preview中预览,它 ...