ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery样式操作

2022-04-11 09:01:08  阅读:222  来源: 互联网

标签:jQuery aaa 样式 bbb 操作 property class CSS 属性


一、增加一个class类

//增加一个bbb的class类,aaa与bbb同时存在

 $(".aaa").addClass("bbb");

 

二、 删除一个class类

//删除aaa这个class类

$(".aaa").removeClass("aaa");

 

三、修改一个class类

//方法一

    //先删除,后添加。或者先添加后删除均可

    $(".aaa").addClass("bbb").removeClass("aaa");

    $(".aaa").removeClass("aaa").addClass("bbb");

//方法二

    //利用attr方法

    $(".aaa").attr("class","bbb");

    //这里需要注意的是,如果这个HTML标签不止有aaa这一个类时,

    //这个方法之后,这个HTML标签会只有bbb这一个class类,

 

    //当然也可以设置多个

    $(".aaa").attr("class","bbb ccc ddd");

 

    判断是否存在一个class类

 

//判断HTML标签中是否有bbb这个class类

$(".aaa").hasClass("bbb");

//返回值是一个boolean值,存在返回true,不存在返回false。

 

四、实例

 

//实现一个hover功能,鼠标上去为aaa,离开为bbb

$(".ccc").hover(function () {

    $(this).addClass("aaa");

    $(this).removeClass("bbb");

}, function () {

    $(this).addClass("bbb");

    $(this).removeClass("aaa");

}); 

 

 

定义与用法

css() 方法设置或返回选定元素的一个或多个样式属性。

用于返回属性时:

此方法返回第一个匹配元素的指定 CSS 属性值。然而并不完全支持简写 CSS 属性(如 "background" 与 "border"),在不同的浏览器中可能会出现不同的结果。

用于设置属性时:

此方法为所有匹配的元素设置指定的 CSS 属性。


语法

返回 CSS 属性值:

  1. $(selector).css(property)

设置 CSS 属性和值:

  1. $(selector).css(property,value)

使用函数设置 CSS 属性和值:

  1. $(selector).css(property,function(index,currentvalue))

设置多个属性和值:

  1. $(selector).css({property:value, property:value, ...})
参数描述
property 指定 CSS 属性名称,如 "color", "font-weight", 等等。
value 指定 CSS 属性的值,如 "red", "bold", 等等。
function(index,currentvalue) 指定一个函数,该函数返回 CSS 属性的新值
  • index - 返回元素在集合中的索引位置
  • currentvalue - 返回 CSS 属性的当前值

标签:jQuery,aaa,样式,bbb,操作,property,class,CSS,属性
来源: https://www.cnblogs.com/wjingbo/p/16115540.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有