jQuery操作元素对象的样式
在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操作元素对象的样式的更多相关文章
- 转：jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 使用jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- 《从零开始学习jQuery》：用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- jQuar总结10:jQuery操作元素的属性
jQuery操作元素的属性 1 设置单个属性 //html <div></div> //js $('div').attr('id', 'box'); $('div').attr ...
- jQuery操作元素的class属性
今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...
随机推荐
- 201871010114-李岩松《面向对象程序设计（java）》第一周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- fpm打包神奇rpm包升级python2.7.16
fpm打包神器参考文档:https://www.cnblogs.com/flintlovesam/p/6594635.html FPM的安装:安装ruby环境和gem命令: yum -y instal ...
- [ISE调试] 在ISE调试过程中，遇到过的error以及消除办法
1.Incompatible IOB's are locked to the same bank 15,具体如右图, 于是去查引脚配置,发现 也就是说,在bank=15的这组IO里面,我既选了LVAM ...
- pip install xxx Could not fetch URL https://pypi.org/simple/pip/
Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirmingthe ssl certificate: ...
- nyoj 52-无聊的小明 (模拟， SET)
52-无聊的小明 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:1 submit:3 题目描述: 这天小明十分无聊,没有事做,但不甘于无 ...
- nyoj 92-图像有用区域 (BFS)
92-图像有用区域 内存限制:64MB 时间限制:3000ms 特判: No 通过数:4 提交数:12 难度:4 题目描述: “ACKing”同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取 ...
- 类加载器 - ClassLoader详解
获得ClassLoader的途径 获得当前类的ClassLoader clazz.getClassLoader() 获得当前线程上下文的ClassLoader Thread.currentThread ...
- php中static关键字的理解
函数内的static变量 static静态变量的理解 静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在 静态存储区内分配存储单元),该区域中的数据在整 ...
- 研究Java语言的编译器和虚拟机源代码
现在使用Java语言的人很多,但是了解Java语言实现的人非常少.如果要研究Java语言的实现,推荐研究Javac和虚拟机HotSpot的源代码实现,其中Javac相当于Java编译的前端,HotSp ...
- 【Luogu 3275】[SCOI2011]糖果
Luogu P3275 显然是一道经典的差分约束系统 相关知识可以查看:[Luogu 1993]差分约束系统问题--小K的农场 值得注意的是这题使用最长路更合适,因为每一个人都要取得至少一个糖果.在添 ...