//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. Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04

    Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04 By Raj Last updated ...

  2. tp3.2分页

    tp3.2分页 使用tp3.2自带的分页类 <?php // +----------------------------------------------------------------- ...

  3. MVP与MVC的区别

    MVP的主要思想就是解耦View和Model 先大致从图上看一下MVP和MVC又什么不同: MVC: M : Model 数据模型,就是对数据的封装和保存: V : View 视图界面,相当于布局文件 ...

  4. Windows server 2008 R2充当路由器实现网络的互联

    1.路由器的工作原理 当IP子网中的一台主机发送IP分组给同一IP子网的另一台主机时,它将直接把IP分组送到网络上,对方就能收到.而要送给不同IP子网上的主机时,它要 选择一个能到达目的子网上的路由器 ...

  5. 洛谷 P2629 好消息,坏消息

    题目描述 uim在公司里面当秘书,现在有n条消息要告知老板.每条消息有一个好坏度,这会影响老板的心情.告知完一条消息后,老板的心情等于之前老板的心情加上这条消息的好坏度.最开始老板的心情是0,一旦老板 ...

  6. python函数的创建和函数参数

    [1]#函数的作用:1.减少重复代码 2.方便修改,更容易扩展3.保持代码的一致性 [2]#函数简单的定义规则: 函数代码块以def关键词开头,后接函数标识符名称和圆括号(),任何传入参数和自变量必须 ...

  7. linux下mysql-5.6忘记root密码,重置root密码详细过程

      在linux平台下使用mysql过程中忘记了root密码,对于运维和DBA来讲都是一件头疼的事情,下面来讲解下怎么进行重置mysql数据库root 密码: 1.首先停止mysql服务进程: 1 s ...

  8. [python] pyCharm 右击出现run unittest 解决办法

    最近在使用 pyCharm 的时候发现一个情况,右击时出现 "unittests for ...",这时候如果继续点击 run ,可能会出现错误. 看到网上的介绍说,原因是程序方法 ...

  9. Java swing 代码例子

    package com; import java.awt.Button; import java.awt.Container; import java.awt.event.ActionEvent; i ...

  10. Android 自定义TabHost,TabWidget样式

    界面比较简单,要想做得漂亮换几张图片就可以了. 第一步:先在布局(这里用了main.xml创建时自动生成的)里面放上TabHost ,只要将TabHost控件托至屏幕中就可: <?xml ver ...