jQuery-对标签的样式操作
一、操作样式类
// 1.给标签添加样式类
$("选择器").addClass("类名")
// 2.移除标签的样式类
$("选择器").removeClass("类名")
// 3.判断标签是否含有某个样式类
$("选择器").hasClass("类名")
// 4.如果标签包含某个样式类，就移除，否则，就添加
$("选择器").toggleClass("类名")
<!DOCTYPE html>
<html>
<head>
<title>操作样式类</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
}
.bacc{
background-color: red;
}
.border{
border: 1px solid black;
}
.black1{
background-color: black;
}
</style>
</head>
<body>
<div class="div1"> </div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> // 1. 添加一个样式类
$(".div1").addClass("bacc border");
// 2. 删除一个样式类
$(".div1").removeClass("border"); // 移除一个类
// 3. 判断是否包含某个样式类
console.log($(".div1").hasClass("border")); // false
console.log($(".div1").hasClass("bacc")); // true // 4. 切换CSS类，如果有就移除，没有就添加
$(".div1").on("click",function() {
// body...
$(this).toggleClass("black1");
})
</script>
</body>
</html>
操作样式类demo
二、操作CSS属性
// 1.获取标签CSS属性的值
$(".div1").css("backgroundColor")l
// 2.给标签CSS属性赋值
$(".div1").css("backgroundColor","red");
// 3.使用自定义对象 给标签CSS属性赋值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});
操作CSS属性代码：
<!DOCTYPE html>
<html>
<head>
<title>操作CSS样式</title>
<style type="text/css">
.div1{
background-color: black;
width: 200px;
height: 200px; }
</style>
</head>
<body>
<div class="div1"> </div> <script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.获取标签的属性值
console.log($(".div1").css("width"));
// 2.给标签的属性赋值
$(".div1").css("backgroundColor","red");// 将背景颜色改为红色
// 3.通过自定义对象同时赋多个值
$(".div1").css({"backgroundColor":"green","border":"1px solid red"});
</script>
</body>
</html>
操作CSS属性demo
三、标签定位相关操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
示例：
<!DOCTYPE html>
<html>
<head>
<title>操作元素的位置</title>
<style type="text/css">
body{
margin: 0;
}
.div1{
background-color: red;
width: 100px;
height: 100px;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1"> </div> <script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 1.获取匹配元素 在当前窗口的 相对偏移或设置元素位置
console.log($("div.div1").offset()); // 相对于当前的窗口，元素的偏移量
// 2.获取匹配元素相对父元素的偏移
console.log($("div.div1").position());// 他的父元素就是body
// 3.获取匹配元素相对滚动条顶部的偏移
console.log($("div.div1").scrollTop());
// 4.获取匹配元素相对滚动条左侧的偏移
console.log($("div.div1").scrollLeft());
</script>
</body>
</html>
获取标签元素的position
返回顶部代码：
<!DOCTYPE html>
<html>
<head>
<title>返回顶部</title>
<style type="text/css">
.div1{
margin: 0 auto;
width: 1000px;
height: 300px;
}
.backtop{
width: 80px;
height: 80px;
text-align: center;
line-height: 50px;
font-size: 10px;
position: fixed;
bottom: 10px;
right: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button class="backtop hide">返回顶部</button>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<div class="div1">
1<br> </div>
<br>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
// body...
if ($(window).scrollTop()>100){
$(".backtop").removeClass("hide");
}else{
$(".backtop").addClass("hide");
}
})
$(".backtop").on("click",function () {
// body...
$(window).scrollTop(0);
})
</script>
</body>
</html>
返回顶部示例
四、标签尺寸相关操作
height() // 获取内容的宽度
width() // 获取内同的高度
innerHeight()
innerWidth()
outerHeight() // 内容+ 两边的边框
outerWidth()
<!DOCTYPE html>
<html>
<head>
<title>操作尺寸</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1"> </div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($(".div1").height());
console.log($(".div1").width());
console.log($(".div1").innerHeight());
console.log($(".div1").innerWidth()); console.log($(".div1").outerHeight()); // 内容高度 + 两边边框
console.log($(".div1").outerWidth()); // 内容宽度 + 两边的边框
</script>
</body>
</html>
标签尺寸相关操作
jQuery-对标签的样式操作的更多相关文章
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery基础-选择器，样式操作
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...
- jQuery入门教程-CSS样式操作大全
1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- JQuery第三天——CSS操作与JQuery事件
JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
随机推荐
- 【刷题】BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊
Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...
- js关闭当前页面窗口的问题
有两种情况,如果当前页面窗口是由js代码打开的,那么可以直接用js关闭该窗口 如: window.close(); 如果该页面是由用户输入地址直接进去的,直接close是会无效的,此时需要这样做: w ...
- SrervletContext和文件下载
ServletContext对象 生命周期(从生命周期可以看出这个是个全局对象) 项目启动的时候创建 项目关闭的时候销毁 概念:代表整个web应用,可以和程序的容器(服务器)来通信. 获取 通过req ...
- Java EE之会话
1.需要会话的原因 所有HTTP服务器技术都普遍采用HTTP会话的概念,并且Java EE也在规范中添加了对会话的支持. 维持状态 会话用于维持请求和请求之间的状态.HTTP请求自身是完全无状态的.从 ...
- 最新版的Android4.4.2 SDK无法下载解决
http://hi.baidu.com/petercao2008/item/65362d2bdbddfacba5275a50 问题: Downloading ARM EABI v7a System I ...
- 解题：USACO07FEB The Cow Lexicon
题面 第一次做Trie上dp,感谢 @i207M 的资瓷 对子串们建立一棵Trie,设$dp[i][j]$表示到母串第$i$位为止在$Trie$上的$j$号节点时的最小修改数量,然后就可以枚举母串各位 ...
- interface思考练习一
参考了这篇文章,博主超级优秀,看他的最好,我只是写了点自己看他的博文学到的东西.CSDNzdwzzu2006 接口这东西认真学是在第一次构建工程的时候,很晕菜,原来学SE时不扎实,导致东西都不会用,看 ...
- [postfix]转发邮件设置
http://stackoverflow.com/questions/22537523/postfix-recipient-bcc-maps-multiple-recipients-how-to ht ...
- tp5.1 入口文件即报错
---------------------------------------------------------------[ 2018-10-10T10:51:49+08:00 ] 218.93. ...
- Java泛型底层源码解析-ArrayList,LinkedList,HashSet和HashMap
声明:以下源代码使用的都是基于JDK1.8_112版本 1. ArrayList源码解析 <1. 集合中存放的依然是对象的引用而不是对象本身,且无法放置原生数据类型,我们需要使用原生数据类型的包 ...