jQuery给元素添加样式的方法详解

本文实例讲述了jQuery给元素添加样式的方法。分享给大家供大家参考，具体如下：

1、获取和设置样式

$("#tow").attr("class")//获取ID为tow的class属性
$("#two").attr("class","divClass")//设置Id为two的class属性。

2、追加样式

代码如下:

$("#two").addClass("divClass2")//为ID为two的对象追加样式divClass2

3、移除样式

$("#two").removeClass("divClass")//移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")//移除多个样式。

4、切换类名

代码如下:

$("#two").toggleClass("anotherClass") //重复切换anotherClass样式

5、判断是否含有某项样式

代码如下:

$("#two").hasClass("another")==$("#two").is(".another");

6、获取css样式中的样式

代码如下:

$("div").css("color")//设置color属性值. $(element).css(style)

设置单个样式

代码如下:

$("div").css("color","red")

设置多个样式

$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")

7.offset()方法

它的作用是获取元素在当前视窗的相对偏移，其中返回对象包含两个属性,即top和left 。

注意：只对可见元素有效。

var offset=$("div").offset();
var left=offset.left; //获取左偏移
var top=offset.top; //获取右偏移

8、position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性即top和left。

9、scrollTop()方法和scrollLeft()方法

$("div").scrollTop(); //获取元素的滚动条距顶端的距离。
$("div").scrollLeft(); //获取元素的滚动条距左侧的距离。

10、jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。区别是：

toggle：动态效果为从右至左。横向动作。
slideToggle：动态效果从下至上。竖向动作。

比如想实现一个树由下至上收缩的动态效果，就使用slideToggle就ok了。

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery给多个不同元素添加class样式的方法

    本文实例讲述了jQuery给多个不同元素添加class样式的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){

  • JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").css("css属性名","属性值") 如  $("span").css("color","red") 将标签为span的字体都设为红色的 $("#id")  $("span"

  • Jquery显示、隐藏元素以及添加删除样式

    复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func

  • jQuery使用addClass()方法给元素添加多个class样式

    本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法.分享给大家供大家参考.具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(doc

  • jquery 获取dom固定元素 添加样式的简单实例

    <script type="text/javascript">  xx = function(){    //$("#categories div").eq(6).css("color","#000000");  $("#categories div").eq(6).addClass("xxx");  }</script><style>.xxx{}.x

  • jQuery给元素添加样式的方法详解

    本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

  • JavaScript操作HTML元素和样式的方法详解

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素.  实例 <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> <

  • 对python字典元素的添加与修改方法详解

    1.字典中的键存在时,可以通过字典名+下标的方式访问字典中改键对应的值,若键不存在则会抛出异常.如果想直接向字典中添加元素可以直接用字典名+下标+值的方式添加字典元素,只写键想后期对键赋值这种方式会抛出异常. >>>a=['apple','banana','pear','orange'] >>> a ['apple', 'banana', 'pear', 'orange'] >>> a={1:'apple',2:'banana',3:'pear',4:

  • js基础之DOM中元素对象的属性方法详解

    js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • python编程之requests在网络请求中添加cookies参数方法详解

    哎,好久没有学习爬虫了,现在想要重新拾起来.发现之前学习爬虫有些粗糙,竟然连requests中添加cookies都没有掌握,惭愧.废话不宜多,直接上内容. 我们平时使用requests获取网络内容很简单,几行代码搞定了,例如: import requests res=requests.get("https://cloud.flyme.cn/browser/index.jsp") print res.content 你没有看错,真的只有三行代码.但是简单归简单,问题还是不少的. 首先,这

  • Vue实现contenteditable元素双向绑定的方法详解

    Vue实现contenteditable元素双向绑定的方法详解

    目录 前言 contenteditable 基础使用 进阶使用 总结 前言 如何实现一个即时通讯的聊天页面,网上有很多的开源或不开源的成品,可以直接使用,或者简单修改后使用.但在实际项目中,直接使用开源的即时通讯往往不是我们想要的,如何自己开发一个聊天页面呢.本文就着学习的目的,从0开始一步步实现一个聊天框的开发,至于消息的发送和接收,这个就得依靠后端大佬了. 在开发前,首先得明确用什么来实现.用input输入框和textare文本输入肯定是不行的,这两个只能输入文本类数据(输入法表情也算),想

  • 使用jQuery和ajax代替iframe的方法(详解)

    iframe虽然好用,但是其弊端也很明显,一是它不能使用于响应式布局,iframe的使用必须指定高度,而响应式布局的高度兵分固定的.其次iframe不易被搜索引擎的爬虫解读,特别是iframe中嵌套iframe,这是会被搜索引擎认为是个死网站而被放过. 目前主流的应用都使用了ajax代替了iframe. html: <ul class="nav navbar-nav" id="indexMenu"> <li><a target=&quo

  • python为QT程序添加图标的方法详解

    Qt是一种基于C++的跨平台图形用户界面应用程序开发框架.如何跨平台?上到服务器上位机,下到嵌入式GUI,上天入地无所不能.Qt最早是由1991年由Qt Company开发,但是到2008年,Qt Company科技被诺基亚公司收购,是的,就是拥有着我们很多情怀的诺基亚.但在2012年,Qt又被Digia收购.等到了2014年,跨平台集成开发环境Qt Creator 3.1.0正式发布出来,至此,全面支持iOS.Android.WP,QT的时代开始逐步展开. 本文重点给大家介绍python为QT

  • Python列表元素删除和remove()方法详解

    Python列表元素删除和remove()方法详解

    删除列表中元素的方法有三种: 1. del命令 使用del命令能够删除列表中指定位置上的元素,也可以删除整个列表. 2. pop( )方法 使用列表的pop()方法能够删除并返回列表指定位置(默认为最后一个位置)的元素. 3. remove方法 使用列表的remove()方法能够删除列表中首次出现的指定元素,如果列表中不存在该元素则抛出异常.有的时候可能需要删除列表中某一大量重复的数据,我们很容易就会想到列表的remove()方法,例如: x=[1,2,1,2,1,2,1,2] y=[1,1,2

随机推荐