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. jquery的几个语法总结和注意事项

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  2. node.js定时任务：node-schedule的使用

    安装 npm install node-schedule 使用方法 1:确定时间 例如:2014年2月14日,15:40执行 var schedule = require("node-sch ...

  3. C# WinForm开发DataGridView 使用

    1.C# WinForm开发系列 - DataGridView 使用:(http://group.cnblogs.com/topic/40730.html) 2.C# — WinForm DataGr ...

  4. printf 小代码 大问题

    技术 对于我来说 是我前进的动力 虽然有时候感觉会枯燥乏味 不过没关系 放松一下紧张的心态 做一些你能够是你进步的事情  这样 你才会觉得  每天都过得很充实  学海无涯  坚持追求你所想要实现的梦想 ...

  5. 【leetcode刷题笔记】Binary Tree Level Order Traversal II

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  6. I.MX6 Android 永不休眠

    /************************************************************************* * I.MX6 Android 永不休眠 * 说明 ...

  7. 2017-2018-1 20179215《Linux内核原理与分析》第二周作业

    20179215<Linux内核原理与分析>第二周作业 这一周主要了解了计算机是如何工作的,包括现在存储程序计算机的工作模型.X86汇编指令包括几种内存地址的寻址方式和push.pop.c ...

  8. 解决苹果手机Safari浏览器下 字体显示为 蓝色的 问题

    解决苹果手机 Safari浏览器下   字体显示为蓝色的 问题 近期测试同学测试,wap站上,底部文字在苹果8上面 ,使用 Safari浏览器打开,一直显示 蓝色字体 其他正常,寻找半天无解,最后 阳 ...

  9. 洛谷 P1767 家族_NOI导刊2010普及（10）

    题目描述 在一个与世隔绝的岛屿上,有一个有趣的现象:同一个家族的人家总是相邻的(这里的相邻是指东南西北四个方向),不同的家族之间总会有河流或是山丘隔绝,但同一个家族的人不一定有相同姓氏.现在给你岛上的 ...

  10. 【C/C++】scanf，printf 函数

    摘自http://www.cplusplus.com 1. scanf 函数 int scanf ( const char * format, ... ); Parameters format C s ...