1.类名操作

  • class类名以字符串的形式存储到标签和Dom元素的属性中，标签属性为class，Dom元素属性为className，两个属性是均支持读取和修改，修改其中的一个会同步至另一个属性
  • className属性：拿到Dom后，通过这个属性来读取和修改
<body>

    <div id="app">

        <div id="box" class="box text-align">测试样式类名</div>

    </div>

</body>


<script>

    var box = document.querySelector("#box")

    //读取并打印

    console.log(box.className) //box text-align

    //设置className

    box.className = "box text-align text-success"

</script>
  • 标签属性：通过getAtrribute()/setAtrribute()方法直接读取和修改
<script>

    var box = document.querySelector("#box")

    console.log(box.getAttribute("class")) //box text-align

    box.setAttribute("class","box text-align text-success")

</script>
  • 缺点：样式类以字符串形式读取和设置，但是样式类生效时时彼此独立的，不方便操作

2.classList 属性

  • 这个属性以数组形式返回元素css类名，且支持对数组元素的怎删改查
  • 注意：这个是HTML5里面新增的属性，旧版本浏览器不支持
<body>

    <div id="box" class="box text-align">测试样式类名</div>

</body>

<script>

    var box = document.querySelector("#box")

    //一个带value属性的数组

    //DOMTokenList(2) ['box', 'text-align', value: 'box text-align']

    console.log(box.classList)

</script>
  • 属性方法add(class1, class2, ...)：在元素中添加一个或多个类名（已经存在的类名不会重复添加，能自动去重）
<script>

    var box = document.querySelector("#box")

    //添加一个类

    box.classList.add('text-success')

    ////DOMTokenList(3) ['box', 'text-align', 'text-success', value: 'box text-align']

    console.log(box.classList)

</script>
  • 属性方法remove(class1, class2, ...)：移除元素中一个或多个类名
<script>

    var box = document.querySelector("#box")

    //移除一个类

    box.classList.remove('text-align')

    ////DOMTokenList(1) ['box']

    console.log(box.classList)

</script>
  • 属性方法toggle()：切换某个类名，如果这个类名已经存在就把他移除，如果类名不存在则添加这个类名
<script>

    var box = document.querySelector("#box")

    //切换一个类

    box.classList.toggle('text-align')

    ////DOMTokenList(1) ['box']

    console.log(box.classList)

    //切换一个类

    box.classList.toggle('text-align')

    ////DOMTokenList(2) ['box','text-align']

    console.log(box.classList)

</script>
  • 属性方法contains()：判断元素是否含有指定的css类名
<script>

    var box = document.querySelector("#box")

    // true

    console.log(box.classList.contains("box"))

    // false

    console.log(box.classList.contains("text-success"))

</script>
  • 属性方法replace()：替换某个css类名
<script>

    var box = document.querySelector("#box")

    // 替换类名

    box.classList.replace("text-align","left-align")

    //DOMTokenList(2) ['box', 'left-align', value: 'box left-align']

    console.log(box.classList)

</script>

3.内联样式

  • 通过Dom元素的style属性进行操作
<script>

    var box = document.querySelector("#box")

    // 替换类名

    box.style.color = "red"

</script>
  • 如果css属性带有 "-" ，设置时使用驼峰法或者数组语法
<script>

    var box = document.querySelector("#box")

    // 驼峰法 background-color

    box.style.backgroundColor = "red"

    //数组语法

    box.style["box-sizing"] = "border-box"

</script>

JavaScript 样式操作的更多相关文章

  1. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  2. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...

  3. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  4. DOM样式操作

    CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...

  5. jQuery - 5.样式操作

    样式操作 1.获取样式 attr("class"), 2.设置样式attr("class","myclass"), 3.追加样式addCla ...

  6. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  7. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  8. JavaScript动态操作style

    1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...

  9. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  10. 关于JavaScript的操作

    一:js基础. 1. var是定义js变量的关键字. 如: var leng=5;定义一个变量为5 var length = 16; // Number 通过数字字面量赋值 var points = ...

随机推荐

  1. 合合信息亮相“海聚英才”全球创新创业峰会，政企研合力推动AI人才培养

    近日,"聚上海,创未来"第三届"海聚英才"全球创新创业峰会在沪举行,"创新之路:卓越工程师培养交流研讨会"(简称"研讨会" ...

  2. 深度学习批次(batch)、迭代(iteration)、周期(epoch)、前向传播(forward propagation)、反向传播(backward propagation)、学习率(learning rate)概念解释

    虽然现在应该是已经熟练掌握这些基础概念的时候,但是我是鱼的记忆,上一秒的事情,下一秒就忘了,除非是重要的人的重要的事情,呜呜呜呜,我这个破脑子. 还是写一下吧,直接GPT出来的(人类之光,欢呼~). ...

  3. TS-TCC: 通过时序和上下文对比学习时间序列表征《Time-Series Representation Learning via Temporal and Contextual Contrasting》(时间序列、时序表征、时间和上下文对比、对比学习、自监督学习、半监督学习)

    现在是2023年11月14日的22:15,肝不动了,要不先回寝室吧,明天把这篇看了,然后把文档写了.OK,明天的To Do List. 现在是2023年11月15日的10:35,继续. 论文:Time ...

  4. JavaScript – Rest Parameters & Spread Operator

    介绍 Rest 和 Spread 的共同点是语法都是 ... (点点点). 但它们的概念是相反的. 看例子体会: Rest Parameters 参考: 阮一峰 – rest 参数 rest para ...

  5. CSS – 冷知识 (新手)

    <img> extra 4px at the bottom 参考: Extra 4px at the bottom of html <img> The mysterious 4 ...

  6. Java日期时间API系列29-----Jdk8中java.time包中的新的日期时间API类，Java定时任务job中cron表达式计算应用。

    Java开发过程中经常会用到定时任务job的场景,比如定时处理数据报表等问题,开源作业调度框架也非常多,常用的开源作业调度框架有:Spring Task.Quartz和xxl-job等.各个框架的具体 ...

  7. 33. mvvm理解

    MVVM 是module view view-module 数据驱动视图开发模型,是MVC的改进版,采用业务逻辑和页面解构分离的开发思想: MVVM 实现了 view 和 module 的双向绑定,我 ...

  8. SaaS架构：应用服务、应用结构设计

    大家好,我是汤师爷~ 应用架构设计通常包括以下步骤: 根据业务架构,将业务需求转化为IT系统,识别核心应用服务. 划分应用结构,设计应用结构与业务流程.数据之间的关系. 设计应用结构之间的交互和集成关 ...

  9. KubeSphere 社区双周报 ｜ 2023.12.21-2024.01.04

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...

  10. 使用 KubeKey 在 AWS 高可用部署 Kubernetes

    作者:李耀宗 介绍 对于生产环境,我们需要考虑 Kubernetes 集群的高可用性.本文教您部署如何在多台 AWS EC2 实例快速部署一套高可用的生产环境.要满足 Kubernetes 集群服务需 ...