JQuery操作元素的css样式
我们常常要使用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类。
下面是一个完整的例子。
<span style=”font-size:18px;”><!DOCTYPE HTML>
<head>
<title>图片闪烁</title>
<style type=”text/css”>
@-webkit-keyframes twinkling{ /*透明度由0到1*/
0%{
opacity:0; /*透明度为0*/
}
100%{
opacity:1; /*透明度为1*/
}
}
.up{
-webkit-animation: twinkling 1s infinite ease-in-out;
}
</style>
</head>
<body>
<div id=”soccer” class=”up”>
哈哈
</div>
<br/>
<input type=”button” onclick='btnClick()'>
<script src=”./jQuery/jquery-1.8.3.js” type=”text/javascript”></script>
<script>
function btnClick(){
//$(“#soccer”).removeClass(“up”);
$(“#soccer”).toggleClass(“up”);
//$(“p:first”).removeClass(“intro”);
}
</script>
</body>
</html>
</span>
以上所述就是本文关于jQuery操作CSS样式的全部内容了，希望大家能够喜欢。
相关推荐
-
jQuery 中关于CSS操作部分使用说明
刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴. 其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此 复制代码 代码如下: jQuery.className.has的定义可以改进成: has: function( t, c ) { t = t.className || t;
-
jQuery操作元素css样式的三种方法
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q
-
jquery 操作css样式、位置、尺寸方法汇总
一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti
-
jQuery操作css样式
css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: html代码 jQuery代码 效果如下: css操作之尺寸操作 css代码 html代码 jQuery代码 效果如下 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
-
JQuery中操作Css样式的方法
复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除
-
JQuery结合CSS操作打印样式的方法
本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q
-
基于jquery animate操作css样式属性小结
昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi
-
jQuery使用手册之三 CSS操作
传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(&
-
jQuery学习笔记 操作jQuery对象 CSS处理
CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,-,nameN:valueN}) 设置元素上CSS规则name属性的值为value,也可使用函数参数,不解释:还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值.这
-
JQuery操作元素的css样式
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"
-
jQuery操作元素的内容和样式完整实例分析
本文实例讲述了jQuery操作元素的内容和样式.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作元素的样式和内容</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <scrip
-
jquery实现动态改变css样式的方法分析
本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个
-
jQuery操作元素追加内容示例
本文实例讲述了jQuery操作元素追加内容.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type
-
jQuery操作元素节点
目录 一.查找节点 二.创建和插入节点 1.创建节点 2.插入子节点 3.插入同辈节点 三.替换节点 四.复制节点 五.删除节点 jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&
-
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="
-
jQuery操作属性和样式详解
• 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",
-
jQuery学习3：操作元素属性和特性
先看一个例子: 复制代码 代码如下: <a id="easy" href="#">http://www.jb51.net</a>现在要得到a标签的属性id.有如下方法: 复制代码 代码如下: jQuery("#easy").click(function() { alert(document.getElementById("easy").id); //1 alert(this.id); /
-
用Jquery.load载入页面后样式没了页面混乱的解决方法
因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添