在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. Android常见内存泄露

    前言 对于内存泄漏,我想大家在开发中肯定都遇到过,只不过内存泄漏对我们来说并不是可见的,因为它是在堆中活动,而要想检测程序中是否有内存泄漏的产生,通常我们可以借助LeakCanary.MAT等工具来检 ...

  2. SpringBoot 2.x版本+MultipartFile设置指定文件上传大小

    SpringBoot-versio:2.1.9-RELEASE 由于新版本的SpringBoot已经弃用了如下, 这种方式,提供了新的 配置方案. 这个是官方的介绍 Handling Multipar ...

  3. 如何给HTML标签中的文本设置修饰线

    text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...

  4. 三、netcore跨平台之 Linux配置nginx负载均衡

    前面两章讲了netcore在linux上部署以及配置nginx,并让nginx代理webapi. 这一章主要讲如何配置负载均衡,有些步骤在前两章讲的很详细了,所以这一章我就不会一个个截图了. 因为本人 ...

  5. root权限后，不要忘了还有selinux

    下面的例子运行在中兴android 5.0手机上. 当我们使用root权限的python去创建socket监听端口8088时,selinux向kmsg输出了下面的记录 python-android5 ...

  6. 交叉编译sqlcipher

    1. 小心预编译宏SQLITE_HAS_CODEC 2. openssl在不同License下,导出的符号不对等.(错了,1.1.0后api发生变化,小心选用openssl版本) 3, ac使用了li ...

  7. 在SQL Server数据库中执行存储过程很快，在c#中调用很慢的问题

    记录工作中遇到的问题,分享出来: 原博客地址:https://blog.csdn.net/weixin_40782680/article/details/85038281 今天遇到一个比较郁闷的问题, ...

  8. PowerMock学习（六）之Mock Final的使用

    Mock Final mockfinal相对来说就比较简单了,使用powermock来测试使用final修饰的method或class,比较简单,接口调用部分,还是service调用dao. 对于接口 ...

  9. 原生JS scroll()、scrollTo()、scrollBy()

    scroll()  此方法接收两个参数,依次为X坐标和Y坐标:设置滚动条的偏移位置 scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置. scrollBy() 此法发同样 ...

  10. Socket 实现简单的多线程服务器程序

    **********服务器端************* public class ServerSocket{ public static void main(String[] args) throws ...