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. QQ.PC管家进程

    1.家里的笔记本 WIn7x64 C:\Program Files (x86)\Tencent\QQPCMgr\12.10.19266.225\QMDL.exeC:\Program Files (x8 ...

  2. SDN关键技术-Segment Routing协议简介

    当前,SDN作为一种新的网络架构,已经成为行业高度关注的热点.其倡导的开放式网络,代表了从网络应用适应网络能力向网络能力主动适配网络应用需求这个网络建设理念的改变.转发与控制分离.集中的控制层面.开放 ...

  3. Spark- 求最受欢迎的TopN课程

    数据库操作工具类 package com.rz.mobile_tag.utils import java.sql.{Connection, DriverManager, PreparedStateme ...

  4. 机器学习（二十三）— L0、L1、L2正则化区别

    1.概念  L0正则化的值是模型参数中非零参数的个数. L1正则化表示各个参数绝对值之和. L2正则化标识各个参数的平方的和的开方值. 2.问题  1)实现参数的稀疏有什么好处吗? 一个好处是可以简化 ...

  5. 再次理解WCF以及其通信（附加一個編程小經驗）

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  6. 计算机丨浏览器访问出现DNS_PROBE_POSSIBLE解决方法

    方法1.打开命令控制台输入: netsh winsock reset.提示重启,电脑重启后就ok了. 其他方法待续......

  7. HDU - 5934

    tarjan 视频讲解 /** * 题目链接:https://vjudge.net/problem/HDU-5934 * 题意:给你n个炸弹,引爆每个炸弹会有一定的花费.每个炸弹给出坐标x,y,半径r ...

  8. JSTL前台报错

    报错信息: jsp页面报错 Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core&qu ...

  9. codeforces 652B B. z-sort(水题)

    题目链接: B. z-sort time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. stl_slist.h

    stl_slist.h // Filename: stl_slist.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: http:/ ...