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. Spring MVC的工作原理和机制

    Spring  MVC的工作原理和机制 参考: springMVC 的工作原理和机制 - 孤鸿子 - 博客园https://www.cnblogs.com/zbf1214/p/5265117.html ...

  2. jQuery-选择器（2）

    jQuery选择器(2) 继续学习jquery选择器,感受它对于操作DOM节点的方便. [属性筛选选择器]属性选择器可以让你基于属性来定位一个元素.可以只指定该元素的某属性,这样所有使用该属性而不管它 ...

  3. beans.factory.BeanCreationException beans.factory.annotation.Autowired(required=true)

    主要是这三个方面排查: 1,注入写成这样 @Autowired   private BrandServiceImpl      brandServiceImpl; 2,jar冲突,在pom.xml中 ...

  4. LXC linux容器简介——在操作系统层次上为进程提供的虚拟的执行环境，限制其使用的CPU和mem等资源，底层是linux内核资源管理的cgroups子系统

    1.LXC是什么? LXC是Linux containers的简称,是一种基于容器的操作系统层级的虚拟化技术. 2.LXC可以做什么? LXC可以在操作系统层次上为进程提供的虚拟的执行环境,一个虚拟的 ...

  5. linux apt-get remove如何恢复

    linux卸载或删除软件时,若不小心删除到关联的软件,如果想撤销删除操作需要在/var/log/apt/history.log中依次安装删除的软件,具体操作如下: $echo '#!/bin/bash ...

  6. codeforces 633D D. Fibonacci-ish(dfs+暴力+map)

    D. Fibonacci-ish time limit per test 3 seconds memory limit per test 512 megabytes input standard in ...

  7. Android之SharedPreferences权限

    import android.app.Activity; import android.content.SharedPreferences; import android.os.Bundle; pub ...

  8. codeforces914G Sum the Fibonacci

    题目大意:给定一个长为$n$($n\leq 10^6$)的序列S,定义一个合法的五元组$(a,b,c,d,e)$合法当且仅当 $$ ( S_a \mid S_b ) and S_c and ( S_d ...

  9. ngget配置

    Install-Package NuGet.CommandLine nuget spec nuget pack Jryg.VirtualNumber.ClientNet4.csproj -Includ ...

  10. [BZOJ1396&2865]识别子串

    bzoj1396 bzoj2865 dbzoj1396 dbzoj2865 题面 XX在进行字符串研究的时候,遇到了一个十分棘手的问题. 在这个问题中,给定一个字符串\(S\),与一个整数\(K\), ...