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

原文地址:https://www.cnblogs.com/liangliangjiang/p/6185449.html

转:jquery操作元素的css样式(获取、修改等等)的更多相关文章

  1. 使用jquery操作元素的css样式(获取、修改等等)

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  2. jQuery操作元素对象的样式

    在jQuery中操作元素为了加快速度,或者书写速度,可以用到json的格式: <!DOCTYPE html> <html> <head> <meta char ...

  3. javascript操作元素的css样式

    我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...

  4. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  5. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  6. 使用jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  7. 《从零开始学习jQuery》:用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  8. jQuery操作元素的属性与样式

    本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...

  9. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

随机推荐

  1. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  2. 0002 - Spring MVC 拦截器源码简析:拦截器加载与执行

    1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日 ...

  3. UE4中使用URL图片

    转自:http://www.52vr.com/article-911-1.html

  4. h5标签兼容

    <!--[if lt IE 9]> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"> ...

  5. CentOS的文件属性:命令 ls -l

    第一列:有11位 1)第一位表示文件类型 1)l表示链接文件 2)d表示目录 3)-普通文件 4)b块设备  磁盘分区就是这种类型 5)c 串行端口设备文件(字符设备文件),比如键盘,鼠标,打印机,t ...

  6. mysql的DATE_FORMAT参数格式

    mysql有个字段是DATETIME类型,要实现可以按月统计,该怎么写sql语句?select month(f1) from tt group by month(f1)or select DATE_F ...

  7. Java - 16 Java 方法

    在前面几个章节中我们经常使用到System.out.println(),那么它是什么呢? println()是一个方法(Method),而System是系统类(Class),out是标准输出对象(Ob ...

  8. 《Linux 性能及调优指南》2.4 基准工具

    翻译:飞哥 (http://hi.baidu.com/imlidapeng) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance a ...

  9. 分布式系统的Raft算法

    好东西~~ 英文动画演示Raft 过去, Paxos一直是分布式协议的标准,但是Paxos难于理解,更难以实现,Google的分布式锁系统Chubby作为Paxos实现曾经遭遇到很多坑. 来自Stan ...

  10. EF大数据批量处理----BulkInsert

    之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramework,于是就在网上查资料,研究如何提高EF的性能. 在这分享一篇博客 批量操作提升EntityFramework的性 ...