JQuery中操作Css样式的方法

简介:

JQuery中操作Css样式的方法


<strong>//1、获取和设置样式</strong>  
 $("#tow").attr("class")获取ID为tow的class属性 
 $("#two").attr("class","divClass")设置Id为two的class属性。 
 <strong>//2、追加样式</strong> 
 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 
 <strong>//3、移除样式</strong> 
 $("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。 
 $(#two).removeClass("divClass divClass2")移除多个样式。 
 <strong>//4、切换类名</strong> 
 $("#two").toggleClass("anotherClass") //重复切换anotherClass样式 
 <strong>//5、判断是否含有某项样式</strong> 
 $("#two").hasClass("another")==$("#two").is(".another"); 
 <strong>//6、获取css样式中的样式</strong> 
 $("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") 
 <strong>//7.offset()方法</strong> 
 //它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。 
 //注意:只对可见元素有效。 
 var offset=$("div").offset(); 
 var left=offset.left;         //获取左偏移 
 var top=offset.top;        //获取右偏移 
 //8、position()方法 
 //它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。 
 <strong>//9、scrollTop()方法和scrollLeft()方法</strong> 
 $("div").scrollTop();        //获取元素的滚动条距顶端的距离。 
 $("div").scrollLeft();         //获取元素的滚动条距左侧的距离。 
 <strong>//10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:</strong> 
 //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属性
 

转载:http://www.jb51.net/article/46689.htm

本文转自程序猿博客51CTO博客,原文链接http://blog.51cto.com/haihuiwei/1683891如需转载请自行联系原作者

365850153
相关文章
|
20天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
32 5
|
9天前
|
前端开发 JavaScript UED
|
13天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
16天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
26天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
124 1
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
45 2
|
14天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
14天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
14天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。