详解jQuery操作元素css样式的三种方法

jquery里提供三种方法来改变页面元素的样式,虽然它们和传统方法的思想相通,但是却节省了许多代码

我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 – “jQuery让JavaScript代码变得简洁!”

1. addClass() – 添加CSS类
$(“#target”).addClass(“newClass”);
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称
2. removeClass() – 移除CSS类
$(“#target”).removeClass(“oldClass”);
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称
3. toggleClass() – 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
$(“#target”).toggleClass(“newClass”)
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类”newClass“将被赋给该ID。

在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass(“className”)用来判断某个元素是否已经被赋予某个CSS类。

下面是一个完整的例子。

代码如下:

nbsp;HTML>  图片闪烁  @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } } .up{ -webkit-animation: twinkling 1s infinite ease-in-out; }    

 哈哈 

 
    function btnClick(){ //$("#soccer").removeClass("up"); $("#soccer").toggleClass("up"); //$("p:first").removeClass("intro"); }   

登录后复制

以上就是详解jQuery操作元素css样式的三种方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2905718.html

(0)
上一篇 2025年3月11日 02:26:06
下一篇 2025年3月8日 16:57:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 深入了解css样式之超出隐藏总结

    文本超出部分隐藏,总结两种方法。 1、单行隐藏 html代码 立即学习“前端免费学习笔记(深入)”; 当文字超过范围的时候,超出部分会隐藏起来。 登录后复制 css代码 .mi {width: 200px;overflow: hidden;…

    编程技术 2025年3月11日
    200
  • 详解CSS样式要全局定义的内容

    这篇文章主要为大家详解css样式要全局定义的内容的相关资料,需要的朋友可以参考下 /** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural el…

    编程技术 2025年3月11日
    200
  • web前台css样式知识点详细介绍

    1. css样式的优先级   在html中使用css样式,很很多种方法 有外部引用方法 有 直接从head>标签中 写控制html的CSS样式语句 可以直接在想要控制的 标签当中直接写入css来控制 立即学习“前端免费学习笔记(深入)…

    编程技术 2025年3月11日
    200
  • 常用的CSS样式

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:’宋体’,’黑体’,’Arial’; } 登录后复制 font-size 设置字体大小 length …

    2025年3月11日
    200
  • 必须掌握的CSS文字样式

    介绍几个文字样式,感兴趣的小伙伴们可以看一下。 文字大小: |xx-small|x-small|small|medium|large|x-large|xx-lager|      :  large  small 相对父元素的大或者小 文字字…

    2025年3月11日
    200
  • 关于DW在html中插入css样式的方法

    进行网页设计想要有一个好看的界面布局我们就得要使用到css样式,下为大家介绍dw在html中插入css样式方法,不会的朋友可以参考本文,来看看吧   在使用Dreamweaver CS6进行网页制作的时候,页面布局样式会很多。可以利用插入c…

    2025年3月10日 编程技术
    200
  • a标签的css样式中的四个状态

    这篇文章主要介绍了关于a标签的css样式中的四个状态,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visi…

    编程技术 2025年3月10日
    200
  • 关于CSS样式中的!important和*以及_符号的解析

    这篇文章主要介绍了详解css样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 详解CSS样式中的!important、*、_符号 !important、*、_其实没什么用,皆是用来设置样式的…

    2025年3月10日 编程技术
    200
  • 关于CSS样式中大于号的使用及Css中处理继承方法

    继承给我们的程序带来一定的困扰,所以认真的学习继承的原理,下面有个不错的示例,一个处理继承的一个方法,感兴趣的朋友可以参考下 继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,…

    编程技术 2025年3月10日
    200
  • 使用css样式制作的漂亮按钮

    这篇文章主要介绍了关于使用css样式制作的漂亮按钮,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 css样式制作的按钮,很漂亮,值得收藏,在下文贴出具体的实现css,喜欢的朋友可以研究下 nbsp;html PUBLIC “…

    2025年3月10日
    200

发表回复

登录后才能评论