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属性

JQuery中操作css样式

时间: 2024-10-05 05:08:16

JQuery中操作css样式的相关文章

jquery轻松操作CSS样式

$(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”);  }else{    $(this).addClass(“zxx_fri_on”);  }  return false;});   添加或去除元素集合的class name 1. 使用addClass()方法 addClass(names) 添加names指定的一个或多个class name给wr

jQuery系列 第三章 jQuery框架操作CSS

第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程.     使用原生的方式来设置标签的样式(代码示例) 1 <body> 2 <div>我是div标签</div> 3 <button id=

jQuery中的css属性对应名称

css中一些样式属性可以直接引用到jquery中,但是有些属性在jquery中与在css中有些区别,下面就是一些常用属性在css与jquery中的名称. jQuery中的css属性对应名称 css jQuery bottom bottom left left right right top top width width min-width minWidth max-width maxWidth height height min-height minHeight max-height maxH

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

操作css样式【js】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ti

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

HTML文档中应用css样式的方法总结

在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的link标记语句: <link rel="stylesheet" type="text/css" href="main.css" media="all" /> link标记必须放在head元素中,且不能放在其他元素(如t

JS中改变CSS样式以及阻止冒泡总结

在JS中改变CSS样式,一般是通过鼠标或者键盘事件触发调用函数来实现CSS样式的改变,采用“className.style.stylename="";”来实现,例如 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程挑战</title> <link rel="stylesheet" type

jquery中使用css,offset和position设置top和left属性

有一个dom元素,它的position属性值为absolute,要通过jquery设置它的位置. 我们可以通过三种方法设置该元素的top和left值,设置这两个属性的值时,元素的position属性必须为absolute或relative. 第一种:使用jQuery对象的css方法,使用该方法可以直接把对象的位置设定到指定的地方,指定哪个位置就是哪个位置. 第二种:使用jQuery对象的offset方法,使用该方法时要注意,offset方法的作用是获取或设置匹配元素在当前视口的相对偏移.这句话粗