jquery对css操作
1.css
取得p的颜色:
$(document).ready(function(){
var p= $("p").css("color");
alert(p);
});
设置段落字体的颜色为红色:
$(document).ready(function(){
$("p").css("color","red");
});
设置段落字体的颜色为红色并且背景色为蓝色:
$(document).ready(function(){
$("p").css({color:"red",background:"blue"});
});
<body>
<div>test1</div>
<div id="d" >test2</div>
<input type="text" value="文本框" />
<input type="submit" />
<p>p</p>
</body>
2.位置
offset() 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
获取p2段落的位置:
$(document).ready(function(){
var p=$("p:last");
p.html( "left: " + p.offset().left + ", top: " + p.offset().top );
});
设置p2段落的位置:
$(document).ready(function(){
$("p:last").offset({top:150,left:20});
});
position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。
获取第一段相对第二段的位置偏移:
$(document).ready(function(){
var p=$("p:first");
$("p:last").html("left:"+p.position().left+",top:"+p.position().top);
});
scrollTop()获取匹配元素相对滚动条顶部的偏移
获取第一段相对滚动条顶部的偏移
$(document).ready(function(){
var p=$("p:first");
$("p:last").text("scrollTop:"+p.scrollTop());
});
scrollLeft() 获取匹配元素相对滚动条左侧的偏移。
<body>
<div>test1</div>
<div id="d" >test2</div>
<input type="text" value="文本框" />
<p>p1</p>
<p>p2</p>
</body>
3.尺寸
height()获取、设置元素高度,width()获取、设置元素的宽度
$(document).ready(function(){
$("p:last").text( "p2高度为:"+$("p:last").height());
});
设置p2的高度:
$(document).ready(function(){
$("p:last").height(30);
});
innerHeight()元素内部区域高度(包括补白、不包括边框)。innerWidth()元素内部区域宽度(包括补白、不包括边框)。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
});
outerHeight()获取匹配元素外部高度(默认包括补白和边框)。outerWidth()获取匹配元素外部宽度(默认包括补白和边框)。
$(document).ready(function(){
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() );
});
最新文章
- R 语言机器学习同步推进~
- ASP.NET Web API 2框架揭秘
- MyISAM 和InnoDB 区别 转
- server.transfer 用法
- 用 Java 实现断点续传 (HTTP)
- 深入浅出Attribute (转载)
- Vim自动补全神器:YouCompleteMe
- AngularJS with MVC4 CRUD
- WPF手写代码配置文件——单例
- css怎样使顶端悬浮导航栏不遮住下面一层页面内容
- WPF中静态引用资源与动态引用资源的区别
- 【转】Spring源码编译
- zabbix自动清理30天前的数据
- eclipse myeclipse中的一些配置
- fcntl设置FD_CLOEXEC标志作用【转】
- SpringBoot项目Shiro的实现(一)
- MySQL索引设计不可忽视的知识点
- ssh连接超时自动断掉的解决办法
- jsp+servlet+javabean开发web项目
- LeetCode第[79]题(Java):Word Search(矩阵单词搜索)
热门文章
- winform 中的Anchor 和 Dock 属性设置
- POJ1363 Rails 验证出栈序列问题
- python习题-注册用户程序
- org.apache.catalina.core.StandardWrapperValve invoke报错
- Mybatis学习--日志
- WC2010 BZOJ1758 重建计划_长链剖分
- hdu 4372 Count the Buildings —— 思路+第一类斯特林数
- Vijos:P1098合唱队形
- 【转】 Pro Android学习笔记(三九):Fragment(4):基础小例子-续
- 查看,上传crushmap命令