在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. docker swarm 过滤器affinity 限制副本不会出现在同一个节点上

    affinity:container!=容器服务名称(可以是正则) 举个例子:stack_ds.yaml # cat stack_dsc.yaml version: '3.0' services: t ...

  2. 基于 cobbler 实现自动安装 linux 系统

    使用 cobbler 实现自动安装 centos 6.7系统 1.yum install cobbler -y 安装 cobbler ,有依赖关系,会自动把 TFTP .HTTP 服务安装上:cobb ...

  3. 查找文件或目录（find、locate、whereis、which、whatis）

    find命令:可以按文件名.文件的类型.用户等条件来递归查找文件或目录 find  [路径]  [匹配表达式] ,常用选项如下 -name filename  按文件名 -user username ...

  4. JavaScript中的基本数据类型和引用数据类型

    ECMAScript变量包括了两种不同的数据类型 在学习JavaScript的数据类型时,我们通常会把数据类型分成六中(官方认为)Object.String.Boolean.Number.Undefi ...

  5. python脚本编写（纯干货）

    写博客的经验不是很多,写的不好或者有什么建议请留言或者联系作者 文章所有权归作者所有,转载转发请联系作者,侵权必纠. 废话不多说,直接开始吧! python脚本的作用也就不说了,首先是一个reques ...

  6. 【Spring】简述@Configuration配置类注册BeanDefinition到Spring容器的过程

    概述 本文以SpringBoot应用为基础,尝试分析基于注解@Configuration的配置类是如何向Spring容器注册BeanDefinition的过程 其中主要分析了 Configuratio ...

  7. Spring框架AOP学习总结（下）

    目录 1. AOP 的概述 2. Spring 基于AspectJ 进行 AOP 的开发入门(XML 的方式): 3.Spring 基于AspectJ 进行 AOP 的开发入门(注解的方式): 4.S ...

  8. 【2018寒假集训Day 7】【最短路径】三种算法的模板

    Luogu单源最短路径模版题 dijkstra #include<cstdio> #include<vector> using namespace std; const int ...

  9. day 39 盒模型 display 浮动

    一.盒模型 属性: width:内容的宽度 height:内容的高度 padding:内边距 内容到边框的距离 border:边框 margin:外边距 另一个边到另一个边的距离 盒模型的计算: 总结 ...

  10. BeanUtils.copyProperties()怎样去掉字段首尾的空格

    背景 下午三时许,笔者正戴着耳机听着歌开心的敲着bug,忽然听到办公室的吵架声,原来是ios开发和产品小姐姐吵起来了,为了一个车牌号的校验问题.起因是ios传的车牌号没有将字符串的首尾空格去掉,后端直 ...