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() );
});

jquery对css操作的更多相关文章

  1. JQuery 之CSS操作

    JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p" ...

  2. JQuery常用CSS操作

    JQuery常用CSS操作 $(elem).css(obj):设置行内样式 $(elem).position():返回相对于父容器位置,只能获取不能设置 $(elem).offset(obj):返回相 ...

  3. jQuery基础--CSS操作、class操作、attr操作、prop操作

    1.1.1    css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...

  4. 【JQuery】css操作

    一.前言         接着上一章的内容,继续JQuery的学习 二.内容 css 设置或返回匹配元素的样式属性 $(selector).css(css-property-name) $(selec ...

  5. jquery之css操作

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. jQuery的CSS操作

    .css()--获取匹配元素集合中的第一个元素的样式属性的值设置每一个匹配元素的一个或多个CSS属性. .hasClass()--确定不论什么一个匹配元素是否有被分配给定的(样式)类: .addCla ...

  7. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  8. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  9. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

随机推荐

  1. 大话设计模式--中介者模式 Mediator --C++实现实例

    1. 中介者模式: 用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立改变他们之间的交互. Mediator的出现减少了各个Colleague的耦 ...

  2. Echarts 地图（map）插件之 省份的颜色自定义

    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...

  3. 在Win8.1系统下如何安装运行SQL Server 2005

    按正常情况,在Win8/Win8.1系统下安装微软的SQL Server 2005套件会存在兼容问题,即使安装完,最后的结果就是导致其服务项无法正常启动. 如果用户创建使用的项目非要按照SQL Ser ...

  4. (转)Java 调用 C++ （Java 调用 dll）

    转自: http://www.cnblogs.com/baokang/p/4979243.html 因为要做点图形处理的项目,需要在Java中调用dll库,所以开发的第一步是研究了一下Java Jni ...

  5. 《java编程思想》：字符串

    1.String对象是不可变的,String类中每个看起来会修改String值的方法,实际上都是创建了一个新的String对象,来包含修改后的内容,所以在对String修改后,想打印新的值,可以直接打 ...

  6. windows下用vs2010编译ffmpeg

    转载自;http://q1q2q3q4q5q6ln.blog.163.com/blog/static/500794332014666536283/ (注意:请务必先阅读:七,后记补充:) ffmpeg ...

  7. Gym - 100851J： Jump（交互+构造+（大胆瞎搞)））

    题意:给定长度为N的01串,现在让你猜这个串,猜的次数要不超过N+500次. 每次你猜一个串,系统会返回N/2,或N,或0.当且当有N/2个位置猜对,N个位置猜对,其他. 思路:因为信息不多,没有关联 ...

  8. 1018 Public Bike Management (30)（30 分）

    时间限制400 ms 内存限制65536 kB 代码长度限制16000 B There is a public bike service in Hangzhou City which provides ...

  9. HDOJ5441(图论中的并查集)

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ; ; ; ...

  10. 问题7：如何实现用户的历史记录功能（最多n条）

    实例:制作猜字游戏,添加历史记录功能,显示用户最近猜过的数字 解决方案:使用容量为n的队列存储历史记录 使用标准库colections中的deque,一个双端循环队列 程序退出前,可以使用pickle ...