当前位置:  编程技术>jquery

jQuery操作元素css样式三种方法示例

    来源: 互联网  发布时间:2014-10-08

    本文导语:  常使用Javascript来改变页面元素的样式。 一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,通常是通过处理HTML Dom的classname特性来实现的; 而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通...

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

来看具体的jquery操作css样式的例子吧。

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类。

完整例子:
 

代码示例:



图片闪烁_css样式_www.

@-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定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • jquery 设置文本框、密码框获得焦点时的样式
  • jQuery样式插件 jqTransform
  • textarea显示成label的样式 jquery实例
  • JQuery如何为元素添加样式
  • jquery获取样式中background-color颜色值
  • jquery 获取dom固定元素 添加样式的简单实例
  • jQuery CSS()方法改变现有的CSS样式
  • jquery css方法改变css样式用法介绍
  • 浅析JQuery UI Dialog的样式设置问题
  • jQuery操作元素css样式的三种方法
  • JQuery中操作Css样式的方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery判断元素的子元素是否存在的示例代码
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • jquery怎么判断元素的子元素是否存在
  • jquery获取一个元素下面相同子元素的个数代码
  • jquery中子元素和后代元素的区别示例介绍
  • jQuery 滑动方法slideDown向下滑动元素
  • JQuery元素控制方法汇总
  • 使用jquery prev()方法找到同级的前一个元素
  • jQuery each循环获取与搜索元素
  • jQuery如何获取与设置表单元素
  • jquery怎么判断html元素是否存在
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 元素缩放插件 Zoomooz
  • jQuery元素覆盖 Ezoverlay
  • jQuery元素滚动插件 simplyScroll
  • jQuery 追加元素的方法如append、prepend、before
  • jquery控制css元素的display(显示与隐藏)属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • jquery、js调用iframe父窗口与子窗口元素的方法整理
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery相册插件 jQuery.popeye iis7站长之家
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3