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

下面是一个完整的例子。


代码如下:

<!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>

赞 (0)

相关推荐

  • jQuery操作css样式

    jQuery操作css样式

    css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: html代码 jQuery代码 效果如下: css操作之尺寸操作 css代码 html代码 jQuery代码 效果如下 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • jQuery使用手册之三 CSS操作

    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 animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jQuery 中关于CSS操作部分使用说明

    刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴. 其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此 复制代码 代码如下: jQuery.className.has的定义可以改进成:      has: function( t, c ) {        t = t.className || t;     

  • 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样式的方法

    复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除

  • JQuery操作元素的css样式

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

  • jquery 操作css样式、位置、尺寸方法汇总

    一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

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

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

  • js改变css样式的三种方法推荐

    共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • js批量设置样式的三种方法不推荐使用with

    一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

  • Jquery获得控件值的三种方法总结

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu

  • React控制元素显示隐藏的三种方法小结

    目录 React控制元素显示隐藏的方法 方法一 方法二 方法三 React切换显示和隐藏 总结 React控制元素显示隐藏的方法 React控制元素显示和隐藏的方法目前我知道的有三种方法: 第一种是通过state变量来控制是否渲染元素,类似vue中的v-if. 第二种是通过style控制display属性,类似vue 中的v-show. 第三种是通过动态切换className. 方法一 第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不

  • 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框架实现元素显示及隐藏三种动画方式

    jQuery框架实现元素显示及隐藏三种动画方式

    目录 一.默认方式显示和隐藏 二.滑动方式显示和隐藏 三.淡入淡出方式显示和隐藏 四.案例:广告的自动显示和隐藏 本文分享自华为云社区<jQuery框架实现元素显示及隐藏动画[附案例分析]>,原文作者:灰小猿. 首先来看一个简单的动画效果图: ​ 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示和隐藏的也只是一个div,而并不是一个图片.下面我就来和小伙伴们讲一个如何对元素的属性进行操作,使其显示或者隐藏! 在jQuery框架中对元素对象进行显

  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    目录 React动态修改元素样式 1.借助ref动态修改样式 2.通过动态控制状态的变化修改元素的样式(两种方式) 3.通过在DOM中使用JS代码(三元运算符) React样式冲突问题 css-样式私有化 cssModules-维持类名 css modules-最佳实践 React动态修改元素样式 React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式 1.借助ref动态修改样式 在需要修改样式的元素上添加ref <div className='scroll

随机推荐