jQuery中的CSS-DOM操作
html代码
<p style="color:blue;">武汉PHP培训-武汉长乐教育</p>
css()方法
$("p").css("color") //获取颜色样式
$("p").css("color", "red"); //设置样式
$("p").css({"color":"red", "font-size":"20px"});
height()和width()方法
$("p").height(); //获取高度
$("p").height("100px"); //设置高度
$("p").width(); //获取宽度
$("p").width("400px") //设置宽度
offset()方法
var offset = $(".children").offset(); //获取元素在当前视窗的相对偏移
//console.log(offset)
var left = offset.left; //获取左偏移
var top = offset.top; //获取上偏移
position()方法
var position = $(".children").position(); //获取relative或absolute元素的祖先节点相对偏移
var left = position.left; //获取左偏移
var top = position.top; //获取上偏移
下面看例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.parent{
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
top:100px;
left:300px;
}
.children{
width: 100px;
height: 100px;
border: 1px solid #08c;
position: absolute;
top:100px;
left:300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
scrollTop()方法和scrollLeft()方法
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.parent{
width: 200px;
height: 200px;
border: 1px solid;
overflow: auto;
}
.children {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
scrollTop()方法和scrollLeft()
</div>
</div>
<button class="button1">获取scrollTop</button><br>
<button class="button2">设置scrollTop</button>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
var scrollTop=$("div").scrollTop(); //获取元素滚动条距离上面的位置
var scrollLeft=$("div").scrollLeft(); //获取元素滚动条距离左边的位置
})
$(".button2").click(function(){
$("div").scrollTop(200); //设置元素滚动条距离上面的位置
$("div").scrollLeft(200); //设置元素滚动条距离左边的位置
})
})
</script>
</body>
</html>
jQuery中的CSS-DOM操作的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- jQuery(3)——DOM操作
---恢复内容开始--- jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...
- jQuery学习笔记(DOM操作)
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
- jquery学习:选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- P1505 [国家集训队]旅游
\(\color{#0066ff}{题 目 描 述}\) Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了 ...
- luogu3380 树套树之线段树套线段树
个人感觉可能是最不需要脑子写的方法 不过也不太好调 就是用一个普通的线段树维护这个序列,但是对于线段树的每一个区间,再开一个动态开点的权值线段树,里面存储这个区间所有元素值 单点修改只会涉及到log棵 ...
- luogu3455 [POI2007]ZAP-Queries 简单的莫比乌斯反演
link ms是莫比乌斯反演里最水的题... 题意:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 多组询问, T<=50000, ...
- linux 虚拟环境问题
1.python环境 python2和python3命令用来区分python版本 pip2和pip3命令用来区分pip,你的包到底安装在哪里pip3 install xxx sudo apt inst ...
- 使用git将本地代码提交到码云上去
码云为开源中国基于git的代码网络托管平台,将代码托管.开发与项目管理工具融为一体.今天第一次将自己的web项目代码上传至码云,过程中遇到一些问题,此处进行总结与过程的演示:当我们在码云上创建好项目后 ...
- WCF的三种模式
WCF通信的3种模式 1.正常模式:客户端调取接口->等待服务响应->接受响应->执行客户端后面代码(wcf服务有入参,有返回值) 2.数据报模式:客户端调取接口->不等待响应 ...
- Python读写操作Excel模块_xlrd_xlwt_xlutils
Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...
- linux下lua运行环境安装
1.下载安装包: [root@H0f ~]# wget http://www.lua.org/ftp/lua-5.2.4.tar.gz http://www.lua.org/ftp/lua-5 ...
- 谷歌Chrome浏览器离线安装包
下载地址(自选版本) 链接: https://pan.baidu.com/s/1_gVP32tBNTR0pHhQbbM8Iw 密码: rmak 有能力的可以自行到下方地址下载: 最新稳定版:https ...
- OCR 维护 crsd.log
###########sample 1 OCR corruption messages are reported in crsd.log, automatic OCR backup is failin ...