使用jquery操作元素的css样式（获取、修改等等）

布满荆棘的人生 2022-06-02 11:43 188阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery怎样设置元素的样式怎样修改元素的样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

你的名字/ 2024年04月19日 10:08/ 0 赞/ 72 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 239 阅读

相关 jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式

> 推荐阅读 > > Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_

谁践踏了优雅/ 2023年01月02日 03:29/ 0 赞/ 204 阅读

相关【js】jQuery获取和修改元素的内容、属性、css样式

1.获取和修改元素内容我们可以使用html()方法获取元素内容和修改内容，类似于元素js的innerHTMl 当html()方法不传参数的时候即是获取该元素的内容，

﹏ヽ暗。殇╰゛Y/ 2022年11月27日 00:45/ 0 赞/ 243 阅读

相关 JQuery中操作Css样式的方法

本篇文章主要是对JQuery中操作Css样式的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助复制代码代码如下: //1、获取和设置样式

红太狼/ 2022年08月05日 01:30/ 0 赞/ 178 阅读

相关 jquery的样式操作，类操作（添加删除 css）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2022年07月14日 00:40/ 0 赞/ 210 阅读

相关 javascript 动态修改css样式方法+JQuery中操作Css样式的方法

JS 显示/隐藏 var img=document.getElementsByName("img"); function onclick

桃扇骨/ 2022年06月09日 09:10/ 0 赞/ 323 阅读

相关使用jquery操作元素的css样式（获取、修改等等）

//1、获取和设置样式 $("\tow").attr("class")获取ID为tow的class属性 $("\two").attr("class","divClass")

布满荆棘的人生/ 2022年06月02日 11:43/ 0 赞/ 189 阅读

相关 jQuery操作CSS样式的方法

jQuery操作CSS样式的方法总共有四种，很简单，建议使用下面的第三种方法。上代码： <!DOCTYPE html> <html lang="en">

矫情吗；*/ 2022年03月12日 10:44/ 0 赞/ 314 阅读

相关通过JQuery来修改CSS样式

JQuery是基于JS（JavaScript）代码编写的一种框架，其封装到许多内置属性和方法，让用户使用起来更加便利，具体代码如下： ①JQuery代码部分：

浅浅的花香味﹌/ 2021年09月23日 13:04/ 0 赞/ 367 阅读