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 ...

随机推荐

nginx 简单教程
使用 nginx 的使用比较简单,就是几条命令. 常用到的命令如下: nginx -s stop 快速关闭Nginx,可能不保存相关信息,并迅速终止web服务. nginx -s quit 平稳关闭N ...
ios中的奇怪崩溃Signal和EXC_BAD_ACCESS错误分析
什么是Signal 在计算机科学中,信号(英语:Signals)是Unix.类Unix以及其他POSIX兼容的操作系统中进程间通讯的一种有限制的方式.它是一种异步的通知机制,用来提醒进程一个事件已经发 ...
P3943 星空区间异或差分
$\color{#0066ff}{ 题目描述 }$ 逃不掉的那一天还是来了,小 F 看着夜空发呆. 天上空荡荡的,没有一颗星星--大概是因为天上吹不散的乌云吧. 心里吹不散的乌云,就让它在那里吧, ...
P4011 孤岛营救问题
$\color{#0066ff}{题目描述}$ 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克 ...
docker 部署net core程序 curl访问地址提示 Connection reset by peer
最近研究netcore 部署到docker上.在参考https://www.cnblogs.com/subendong/p/8992285.html教程之后,部署成功.但是curl访问对应的主机端口地 ...
2017第八届蓝桥杯决赛（C++ B组）2.磁砖样式
磁砖样式小明家的一面装饰墙原来是 310 的小方格. 现在手头有一批刚好能盖住2个小方格的长方形瓷砖. 瓷砖只有两种颜色:黄色和橙色. 小明想知道,对于这么简陋的原料,可以贴出多少种不同的花样来. ...
Kbuild、Kconfig、make menuconfig、.config、Makefile之间的关系
今天突发奇想,想在这里分享下比喻分析Kbuild ---->去饭店吃饭的过程. 1.Kconfig --->饭店的菜单 2.条件编译选项--->菜单中的每一盘菜,可以选择这个菜的 ...
Qt 学习之路 2（11）：布局管理器
Home / Qt 学习之路 2 / Qt 学习之路 2(11):布局管理器 Qt 学习之路 2(11):布局管理器豆子 2012年9月4日 Qt 学习之路 2 70条评论所谓 GUI 界 ...
IDEA 一些莫名其妙的错误....解决办法...
1. 如果一直 update indices......... windows : 删除 c 盘用户目录下 .IntelliJIdea2017.3/system/caches 目录 ..... ...
redis修改密码和更改端口
Liunx下redis修改密码和更改端口 redis一个实例就是一个节点,每个节点分配一个端口号,每个节点对应一个redis.conf配置文件. redis默认配置的端口号是6379,假设现在要多配置 ...

jQuery中的CSS-DOM操作

css()方法

height()和width()方法

offset()方法

position()方法

scrollTop()方法和scrollLeft()方法

jQuery中的CSS-DOM操作的更多相关文章

随机推荐

热门专题