JQuery中操作Css样式的方法

 本篇文章主要是对JQuery中操作Css样式的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

 代码如下:

//1、获取和设置样式
 
$("#tow").attr("class")获取ID为tow的class属性
 
$("#two").attr("class","divClass")设置Id为two的class属性。
 
//2、追加样式
 
$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2
 
//3、移除样式
 
$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。
 
$(#two).removeClass("divClass divClass2")移除多个样式。
 
//4、切换类名
 
$("#two").toggleClass("anotherClass") //重复切换anotherClass样式
 
//5、判断是否含有某项样式
 
$("#two").hasClass("another")==$("#two").is(".another");
 
//6、获取css样式中的样式
 
$("div").css("color") 设置color属性值. $(element).css(style)
 
//设置单个样式
 
$("div").css("color","red")
 
//设置多个样式
 
$("div").css({fontSize:"30px",color:"red"})
 
$("div").css("height","30px")==$("div").height("30px")
 
$("div").css("width","30px")==$("div").height("30px")
 
//7.offset()方法
 
//它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。
 
//注意:只对可见元素有效。
 
var offset=$("div").offset();
 
var left=offset.left;         //获取左偏移
 
var top=offset.top;        //获取右偏移
 
//8、position()方法
 
//它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。
 
//9、scrollTop()方法和scrollLeft()方法
 
$("div").scrollTop();        //获取元素的滚动条距顶端的距离。
 
$("div").scrollLeft();         //获取元素的滚动条距左侧的距离。
 
//10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:
 
//toggle:动态效果为从右至左。横向动作。
 
//slideToggle:动态效果从下至上。竖向动作。
 
//比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。
 
$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
 

时间: 2024-08-04 02:46:55

JQuery中操作Css样式的方法的相关文章

JQuery中操作Css样式的方法_jquery

复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除

基于jquery animate操作css样式属性小结_jquery

昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

jQuery修改操作css属性实现方法

css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法:

JQuery结合CSS操作打印样式的方法

 这篇文章主要介绍了JQuery结合CSS操作打印样式的方法,有需要的朋友可以参考一下 本节内容: JQuery.CSS操作打印样式.   一.添加打印样式   1,为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css:    代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />     用于打印的css:  

jquery 操作css样式、位置、尺寸方法汇总_jquery

一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

jsp页面中插入css样式的三种方法总结

 本篇文章主要是对jsp页面中插入css样式的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. 外部样式   当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部:   <head> <link rel="stylesheet"  type="text/css&qu

jQuery源码-CSS样式相关部分

jquery版本:1.7.2 根据实际需要,对CSS部分无关代码进行适当删除,如有疑问,可参见jquery源码:http://code.jquery.com/jquery-1.7.2.js 因实际工作中暂时没有用到jquery,故对jquery了解很粗浅,文章可能有错漏之处,敬请见谅并指出 本文参考借鉴了nuysoft 的jquery源码分析系列,挺不错的系列文章,推荐下: http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.htm

浅析jQuery中常用的元素查找方法总结

本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用

jQuery给元素添加样式的方法详解_jquery

本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl