jquery操作样式

添加样式、删除样式

切换样式

css("属性","值")

css("属性","值"), 修改多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <style>
        .add-class{
            background-color: #0f0;
            padding: 5px;
            border: 3px solid #000;
        }
    </style>
</head>
<body>
<h1>操作样式</h1>
<button id="btn">添加样式</button>
<button id="btn2">删除样式</button>
<button id="btn3">切换样式</button>
<button id="btn4">css函数修改样式</button>
<p>这是p标签</p>
</body>
</html>
<script>
    $(document).ready(function () {
        //css("属性","值"), 修改多个
        $("#btn4").click(function () {
            $("p").css({
                "backgroundColor": "red",
                "color": "blue"
            });
        });

        // //css("属性","值")
        // $("#btn4").click(function () {
        //     $("p").css("backgroundColor", "red");
        // });

        // //切换样式
        // $("#btn3").click(function () {
        //     $("p").toggleClass("add-class");
        // });

        // //添加样式
        // $("#btn").click(function () {
        //     $("p").addClass("add-class");
        // });
        //
        // //删除样式
        // $("#btn2").click(function () {
        //     $("p").removeClass("add-class");
        // });
    });
</script>

测开之路一百零四：jquery操作样式的更多相关文章

  1. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  2. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  3. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  4. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  5. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  6. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  7. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  8. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  9. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

随机推荐

  1. sql 字符串 切割函数 FUN_Split

    IF EXISTS ( SELECT * FROM dbo.sysobjects WHERE id = OBJECT_ID(N'[dbo].[FUN_Split]') AND OBJECTPROPER ...

  2. Composer学习

    Composer简介 Composer是PHP的一个依赖管理工具,不是包管理器:在项目中声明所依赖的外部工具库(libraries),Composer会自动安装止血工具库及依赖的库文件. 安装方式 C ...

  3. 【 React -- 2/100 】使用React实现评论功能

    React| 组件化 | 递归 | 生成唯一ID 需要探究一下 .find() 和 findIndex() 的区别 import React from 'react' import './commen ...

  4. Docker守护式容器的创建和登录

    创建守护式容器 如果对于一个需要长期运行的容器来说,我们可以创建一个守护式容器(后台运行的容器). 创建(-d)并运行(-i)守护式容器命令如下(容器名称不能重复): docker run -id - ...

  5. MFC学习笔记2---简单计算器

    前言 学习了鸡啄米网页的前三部分后,我们就可以做一个小软件出来了,我选择先做一个计算器. 这是Win7系统自带的计算器: 为了提升成就感,我将计算器的大部分内容去除,于是就变成这样: 这样就只剩下了1 ...

  6. JavaScript设计模式 样例一 —— 工厂模式

    工厂模式(Factory Pattern): 定义:定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类.工厂方法让类的实例化推迟到子类中进行. 目的:工厂模式是为了解耦,把对象的创建和使用 ...

  7. Android相关资源

    各类黑客大会资料 https://infocon.org/cons/ 各类课程.视频 https://github.com/Developer-Y/cs-video-courses#security ...

  8. Cron表达式 详解

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: (1) 7个域: Seconds Minutes Hours DayofMon ...

  9. Deepin（Ubuntu）安装rpm软件包

    1.首先安装alien和fakeroot这两个软件,alien可以将rpm转换为deb包. 在终端中输入命令 sudo apt-get install alien fakeroot 2.使用alien ...

  10. CF1103D Codeforces Round #534 (Div. 1) Professional layer 状压 DP

    题目传送门 https://codeforces.com/contest/1103/problem/D 题解 失去信仰的低水平选手的看题解的心路历程. 一开始看题目以为是选出一些数,每个数可以除掉一个 ...