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'/ ...
随机推荐
- java解数独
先输入要解的数独,采用多维数组来保存其中的值,未填数字的地方,初始化为0,然后采用递归的方法来解数独. 直接上代码: /** * * @author walker * */ public class ...
- 用C语言获取任意文件的长度（可能大于2GB）#define _FILE_OFFSET_BITS 64
打开文件后用 fseek() 函数把文件位置指针移动到文件的末尾,用 ftell() 获得这时位置指针距文件头的字节数,这个字节数就是文件的长度.但是这样做也会受到下面的限制:ftell() 函数的返 ...
- python之旅：模块与包
一.模块介绍 前言:引用廖雪峰大神的,说的很好!!! 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放 ...
- Struts2的配置文件中， <package>的作用,<action><result>重名？
问:Struts2的配置文件中, <package>的作用是什么? 答:防止action重名啊,例如前台和后台,总会有很多地方起名重复的! 问:可是访问的时候,不也是访问action吗,能 ...
- Linux可执行文件后缀问题
一般来说,可执行文件没有扩展名. Linux不根据扩展名判断文件类型,而是根据文件的内容来判断.所以扩展名的作用是帮助人来识别文件,对于Linux系统本身来说没有什么用处. .sh结尾表示是shell ...
- 科学计算三维可视化---Mayavi入门（Mayavi管线）
一:Mayavi管线 mlab.show_pipeline() #显示管线层级,来打开管线对话框 (一)管线中的对象scene Mayavi Scene:处于树的最顶层的对象,他表示场景,配置界面中可 ...
- 数据分析与展示---Pandas库入门
简介 一:Pandas库的介绍 二:Pandas库的Series类型 (一)索引 (1)自动索引 (2)自定义索引 (二)Series类型创建 (1)列表创建 (2)标量值创建 (3)字典类型创建(将 ...
- bzoj千题计划170：bzoj1968: [Ahoi2005]COMMON 约数研究
http://www.lydsy.com/JudgeOnline/problem.php?id=1968 换个角度 一个数可以成为几个数的约数 #include<cstdio> #incl ...
- PHP7 学习笔记（二）PHP5.9 升级到PHP7 遇到的一些坑的记录（php-fpm 图解）
apache_event_php-fpm 示意图: nginx-php-fpm示意图: Worker-Master-Server TCP-Nginx_PHP Nginx-FastCGI 1.使用$_G ...
- js小记 unicode 编码解析
var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; // 关于这样的数据转换为中文问题,常用的两种方法. // 1. eval 解析 ...