在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. 关闭redis持久化功能

    关闭redis持久化功能持久化会报如下信息 会影响硬盘写入性能 所以没什么用 就关掉吧 修改redis配置文件,redis.conf 第115行左右. 1.注释掉原来的持久化规则 <pre> ...

  2. Python 面向对象之五 基础拾遗

    Python 面向对象之五 基础拾遗 今天呢,就剩下的面向对象的相关知识进行学习,主要会学习以下几个方面的知识:1.上下文管理协议,2.为类加装饰器 3.元类 一.上下文管理协议 在学习文件操作的时候 ...

  3. git push后出现错误 ![rejected] master -> master(non-fast-forward) error:failed to push some refs to 'XXX'

    本地创建了一个project并在GitHub上创建了一个仓库,想要将本地的仓库链接到远程仓库我用的是如下方法:git init    //初始化本地仓库git remote add origin XX ...

  4. 分组取topN

    假设有这样一个文件,文件内容如下 class1 class2 class1 class1 class2 class2 class1 class2 class1 class2 要求按照班级分组取出每个班 ...

  5. mui 底部导航栏

    mui 底部导航栏 <nav class="mui-bar mui-bar-tab " id="nav"> <a class="mu ...

  6. lqb 基础练习 查找整数 (遍历)

    基础练习 查找整数 时间限制:1.0s   内存限制:256.0MB     问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含 ...

  7. Test Complete 的自动化测试 --- 三角形

    Test Complete 的自动化测试 --- 三角形 PS:工具:Test Complete , OS:win 10 这里做三角形的测试与上一篇博客做计算器的测试大致一样,都是对.exe的执行文件 ...

  8. 力扣（LeetCode）种花问题 个人题解

    假设你有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花卉不能种植在相邻的地块上,它们会争夺水源,两者都会死去. 给定一个花坛(表示为一个数组包含0和1,其中0表示没种植花,1表示种植了花 ...

  9. 领扣（LeetCode）有效的括号 个人题解

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...

  10. ZeroC ICE的远程调用框架 AMI与AMD -Why？

    在Ice有两种异步使用的方式,AMI和AMD.AMI是异步方法调用,AMD是异步方法调度(分派).前者用在代理端,后者用在饲服实现端. AMI其实就是在代理端,使用Future机制进行异步调用,而不阻 ...