//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样式(获取、修改等等)的更多相关文章

  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. drupal7 带表达式条件的update

    原本的mysql语句是这样的: ; 转化成drupal的api是这样的 $total_amount=1; $rows= db_update('my_payment_card') ->expres ...

  2. IT小鲜肉 widgets tree 三种格式数据源

    昨天完成了下面几个功能,其中最麻烦的就是做图.边学GIMP用法边做图 1.使用GIMP软件G了几个图标 2.支持一维数组数据源,并按照指定的属性对数据源中的数据进行自动分组 运行效果: 3.支持由pi ...

  3. CSS 属性-webkit-tap-highlight-color的理解

    1.-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的 ...

  4. opencv3.2.0实现读取多张图片的方法(利用sprintf()函数)

    简介: 将连续的图片转换成视频时,首先需要把图片全部读入,然后再做相应处理,该程序利用sprintf()函数,实现连续图片的读入 /*********新建QT控制台程序,实现多张连续图片的读取**** ...

  5. Hive安装与应用过程

    1.  参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2.  安装环境说明 2.1.  环境说明 ...

  6. mysql 5.7数据库支持emoji符号但是程序总算报错Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F...' for column ...

    1.线上碰到个问题,端上切换搜狗输入法后,原来限制的表情符号还能输入.数据库使用的是5.7.22版本的,刚开始以为数据库不支持表情符号导致的,但是看了线上的数据库以及字段,都是支持的. show va ...

  7. css.map作用

    看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到 ...

  8. 梯度下降法实现最简单线性回归问题python实现

    梯度下降法是非常常见的优化方法,在神经网络的深度学习中更是必会方法,但是直接从深度学习去实现,会比较复杂.本文试图使用梯度下降来优化最简单的LSR线性回归问题,作为进一步学习的基础. import n ...

  9. lock free数据结构内存回收技术-hazard pointer

    lock free数据结构一般来说拥有比基于lock实现的数据结构更高的性能,但是其实现比基于lock的实现更为复杂,需要处理的难题包括预防ABA问题,内存如何重用和回收等.通常,最简单最有效的处理A ...

  10. microsoft azure 映像发布前的检查清单

    在发布映像提交到 Azure 镜像市场之前,请确保以下检查单全部通过: 产品映像要求 产品映像必须满足如下要求: 适用于生产环境,Azure 镜像市场原则上不接受测试版本产品上架 映像为自包含映像,所 ...