当前位置:  编程技术>WEB前端

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

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

    本文导语:  我们常常要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而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类。

下面是一个完整的例子。
代码如下:



图片闪烁


@-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样式插件 jqTransform
  • textarea显示成label的样式 jquery实例
  • JQuery如何为元素添加样式
  • jquery获取样式中background-color颜色值
  • jquery 获取dom固定元素 添加样式的简单实例
  • jQuery CSS()方法改变现有的CSS样式
  • jquery css方法改变css样式用法介绍
  • 浅析JQuery UI Dialog的样式设置问题
  • JQuery中操作Css样式的方法
  • jquery操作css样式表文件的方法详解
  • jQuery操作元素css样式三种方法示例
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • Jquery 修改class样式的代码示例
  • jquery 动态添加、删除class样式的方法
  • JQuery结合CSS操作打印样式的方法
  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery判断元素的子元素是否存在的示例代码
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • jquery怎么判断元素的子元素是否存在
  • jquery获取一个元素下面相同子元素的个数代码
  • jquery中子元素和后代元素的区别示例介绍
  • jQuery 滑动方法slideDown向下滑动元素
  • JQuery元素控制方法汇总
  • 使用jquery prev()方法找到同级的前一个元素
  • jQuery each循环获取与搜索元素
  • jquery获取第几个元素方法示例 jquery选择器
  • jQuery如何获取与设置表单元素
  • jquery怎么判断html元素是否存在
  • JQuery实现元素屏幕居中显示的代码
  • jQuery 元素缩放插件 Zoomooz
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • jquery链式操作、链式写法的小例子
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • JQuery操作DOM的笔记
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • JQuery 文本框操作的4个小例子
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jquery操作单选框radio的例子
  • 使用jquery实现IE下按backspace相当于返回操作
  • jquery cookie插件用法 jquery操作cookie的例子
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • jquery操作checkbox示例分享
  • Jquery操作radio的小例子
  • jquery操作checkbox实现全选和取消全选
  • Jquery操作html标签及动态添加验证的例子
  • Jquery操作radio的简单实例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • 解决jquery操作checkbox火狐下第二次无法勾选问题 iis7站长之家
  • jQuery圆角插件 jQuery Corners
  • 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