JQuery操作元素的css样式_jquery-js教程-PHP中文网

JQuery操作元素的css样式_jquery

php中文网

发布： 2016-05-16 16:10:35

原创

1462人浏览过

我们常常要使用javascript来改变页面元素的样式。其中一种办法是改变页面元

素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML

Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，

虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 –

“jQuery让JavaScript代码变得简洁！”

立即学习“前端免费学习笔记（深入）”；

1. addClass() – 添加CSS类

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

查看详情

复制代码代码如下:

$(“#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类。

下面是一个完整的例子。

复制代码代码如下:

     图片闪烁

哈哈

大家都在看：

动态管理多选分类与子分类：基于Ajax和jQuery的交互式实现实现JavaScript循环自动滚动与鼠标悬停暂停功能 JavaScript 实现循环自动滚动与鼠标悬停暂停功能从子元素向上查找：判断祖先div是否具有特定类名 JavaScript/jQuery实现循环自动滚动与鼠标悬停暂停教程