JQuery学习之路Part7：Class属性及CSS样式属性相关操作(添加、判断、删除、获取)

Dear 丶 2023-07-13 03:08 5阅读 0赞

# 一、Class #

`addClass()`**：添加 class 属性**

.important
    {
        
    	font-weight:bold;
    	font-size:xx-large;
    }
    
    .blue
    {
        
    	color:blue;
    }

例一：

$("button").click(function(){
        
    $("h1,h2").addClass("blue");
    $("div").addClass("important");
    });

例二：

$("button").click(function(){
        
    $("#div1").addClass("important blue");
    });

--------------------

`hasClass()`**：判断是否有该类名**  
例：

$("div").hasClass("c")

--------------------

`removeClass()`**：删除指定的 class 属性**  
例：

$("button").click(function(){
        
    	$("h1,h2,p").removeClass("blue");
    });

`toggleClass()`**：在添加class属性和删除class属性之间智能切换**  
**如果有 则添加 如果没有 则删除**  
例：

$("button").click(function(){
        
    	$("h1,h2").toggleClass("blue");
    });

# 二、CSS #

#### 获取被选元素的一个或多个css样式属性 ####

`css("propertyname")`  
例：

$("p").css("background-color");

--------------------

#### 设置被选元素的单个css样式属性 ####

语法：**css(样式名,样式值)**  
所修改的是在`<style>`标签内定义的样式 而不是在标签内定义的样式

注：样式名可为驼峰命名法 或 普通命名  
例：

$("p").css("background-color","yellow");

--------------------

#### 设置被选元素的多个css样式属性 ####

语法：`css({"属性名1":"属性值1","属性名2":"属性值2",...});`

例：

$("p").css({
        "background-color":"yellow","font-size":"200%"});

或：

$("div").css({
        
    	"background":"black",
    	"color":"red",
    	"width":"100px",
    	"height":"80px",
    })

--------------------

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关操作属性之修改样式属性

操作属性之修改样式属性 <!DOCTYPE html> <html lang="en"> <head> <meta char

ゝ一纸荒年。/ 2023年10月03日 14:27/ 0 赞/ 59 阅读

相关 JQuery学习之路Part7：Class属性及CSS样式属性相关操作(添加、判断、删除、获取)

一、Class `addClass()`：添加 class 属性 .important { font-weight:bold

Dear 丶/ 2023年07月13日 03:08/ 0 赞/ 6 阅读

相关 js,jQuery操作节点，获取、设置属性，操作class属性

1，创建元素节点： js: document.createElement("div") jQuery: $("<div></div>") 2,创建文本节点并添

Bertha 。/ 2023年06月27日 12:37/ 0 赞/ 66 阅读

相关 jquery动态添加、删除class样式

1.获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class： var p_class = $("p").

叁歲伎倆/ 2022年08月03日 15:53/ 0 赞/ 271 阅读

相关 jquery的样式操作，类操作（添加删除 css）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2022年07月14日 00:40/ 0 赞/ 266 阅读

相关 jquery属性操作添加属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

淩亂°似流年/ 2022年07月14日 00:40/ 0 赞/ 344 阅读

相关 css的其他相关样式属性

一、颜色　　1、预定义的表示颜色的单词　　　　red,black.gray,pink...... 　　2、16进制表示　　　　\ + 6位16进制的数字0 1 2

素颜马尾好姑娘i/ 2022年01月07日 00:51/ 0 赞/ 370 阅读

相关 Jquery属性操作、添加类

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

柔情只为你懂/ 2021年11月09日 07:50/ 0 赞/ 403 阅读

相关 Jquery对属性、样式类class、CSS样式的操作

Jquery对属性的操作 1.读取属性值方法： (1)`$(selector).attr("name");` (2)`$(selector).prop("...

小鱼儿/ 2021年06月30日 09:56/ 0 赞/ 943 阅读

相关 jQuery动态添加删除CSS样式？

jQuery动态追加和移除CSS样式，有两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个实例讲解用法。

小灰灰/ 2020年04月21日 07:15/ 0 赞/ 1059 阅读