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)添 ...
随机推荐
- K8S入门系列之集群二进制部署-->node篇(三)
node节点组件 docker kubelet kube-proxy kubernetes-server-linux-amd64.tar.gz(相关的这里都能找到二进制文件!) falnnel 1. ...
- SSE图像算法优化系列三十：GIMP中的Noise Reduction算法原理及快速实现。
GIMP源代码链接:https://gitlab.gnome.org/GNOME/gimp/-/archive/master/gimp-master.zip GEGL相关代码链接:https://gi ...
- 外行人都能看懂的WebFlux，错过了血亏！
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 本文知识点架构: 如果有关注我公众号文章的同学就会发 ...
- 网站搭建 - 虚拟机的安装 - Linux 本地网站搭建第一步
搭建网站-1-域名申请参见公众号 生物信息系统(swxxxt) 搭建网站-域名绑定见稍后的一章,就是直接点解析,然后就完事了,可以不看的. 首先准备材料: 先装虚拟机,会要求重启,那就重启吧,安装界面 ...
- Git III: 撤销操作
所谓撤销操作,无非就是后悔药.对Git来说,撤销操作主要是以下几块: 撤销已经提交的Commit. 对已经通过git add加入Stage的文件,进行unstage操作. 对已经是Untracked却 ...
- 【持续更新】【pat】pat刷题技巧记录
修改code completion快捷键位CTRL+ENTER,帮助提示函数名称 修改命令行提示符的属性,开启快速编辑模式,方便调试 添加c++11语言标准支持 开启代码调试功能 对输入的字符串进行切 ...
- vue-cli中使用less
先安装less,less-loader npm install less less-loader --save-dev,你会在package.json中看到图下 之后不用配置就可以在项目中用less了 ...
- pat 1035 Password（20 分）
1035 Password(20 分) To prepare for PAT, the judge sometimes has to generate random passwords for the ...
- ArcGIS API For Javascript ：双屏（多屏）地图联动的方法
在遇到地图对比的应用场景下,我们需要双屏地图或者多屏地图来满足我们的业务需求. 解决思路:首先生成两份(多份)地图,然后通过监听地图缩放拖拽,用地图四至将不同的地图对象做绑定,实现多地图联动. 前端部 ...
- 移动端viewport模版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...