【2024】前端学习笔记13-JavaScript修改网页样式

news2024/11/27 16:38:58

学习笔记

  • 1.修改网页样式
    • 1.1.修改内联样式(`style`属性)
    • 1.2.使用`cssText`属性:
  • 2.修改样式类(`classList`属性)
    • 2.1.添加和移除类名
    • 2.2.切换类名(`toggle`方法)

1.修改网页样式

1.1.修改内联样式(style属性)

直接修改元素的style属性:

可以通过获取元素对象,然后直接修改其style属性中的样式规则。

缺点:如果需要修改多个样式,代码可能会变得冗长。

示例:要修改一个div元素的背景颜色和字体大小:

<body>
    <div id="mydiv01">这是一个DIV元素</div>
    <script>
        // 获取元素
        var divElement = document.getElementById("mydiv01");
        // 修改背景颜色为绿色,字体颜色为红色,字体大小为30px
        divElement.style.backgroundColor = "green";
        divElement.style.color = "red";
        divElement.style.fontSize = "30px";
    </script>
</body>

使用 document.getElementById 方法来获取页面中 id 为"mydiv01"的元素,并将其赋值给变量 divElement

使用divElement.style的方式修改元素中的属性。

展示效果:

在这里插入图片描述

1.2.使用cssText属性:

cssText属性允许你一次性设置多个样式规则。

例如:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2192644.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java计算机毕设课设—推箱子游戏(附源码、文章、相关截图、部署视频)

这是什么系统&#xff1f; 基于JAVA的推箱子游戏是一个经典的益智游戏&#xff0c;旨在通过推动箱子到指定位置来锻炼玩家的思维和策略能力。本游戏提供了多种不同难度的关卡&#xff0c;以满足不同玩家的需求。整个程序包括五个主要模块&#xff1a;初始化模块、画图模块、移…

Dart 高级语法

Dart 是一种由 Google 开发的开源编程语言&#xff0c;旨在为构建高性能、可移植的应用程序提供支持。它被设计用于多种平台&#xff0c;包括Web、移动设备&#xff08;通过 Flutter 框架&#xff09;、服务器端应用以及桌面应用。以下是一些 Dart 中比较高级的语言特性和模式。…

Ambari搭建Hadoop集群 — — 问题总结

Ambari搭建Hadoop集群 — — 问题总结 一、部署教程&#xff1a; 参考链接&#xff1a;基于Ambari搭建大数据分析平台-CSDN博客 二、问题总结&#xff1a; 1. VMwear Workstation 查看网关 2. 资源分配 参考&#xff1a; 硬盘&#xff1a;master&#xff08;29 GB&#xff…

连续时间傅里叶变换

一、非周期信号的表示&#xff1a;连续时间傅里叶变换 傅里叶变换对&#xff1a; 通常称为的频谱 二、傅里叶变换的收敛 1、绝对可积 2、在任何有限区间内&#xff0c;只有有限个最大值和最小值 3、在任何有限区间内&#xff0c;有有限个不连续点&#xff0c;且在每个不连…

C语言动态内存管理(26)

文章目录 前言一、引子二、malloc三、calloc四、realloc五、free六、常见的动态内存错误对NULL指针进行解引用操作对动态开辟空间的越界访问对非动态开辟的内存使用free释放使用free释放动态开辟内存的一部分对同一块内存多次释放动态开辟内存忘记释放&#xff08;内存泄漏&…

k8s 之安装helm服务

helm安装包下载helm官网_zh 作者&#xff1a;程序那点事儿 日期&#xff1a;2024/01/30 00:51 下载安装包 wget https://get.helm.sh/helm-v3.2.3-linux-amd64.tar.gz 解压安装包 tar -zxcf helm-v3.2.3-linux-amd64.tar.gz 进入到解压目录 cd linux-amd64 将helm目录拷贝…

101. 对称二叉树【 力扣(LeetCode) 】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路3.1 递归3.2 迭代 四、参考代码4.1 递归4.2 迭代 零、原题链接 101. 对称二叉树 一、题目描述 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 进阶&#xff1a;你可以运用递归和迭代两种方法解决…

YOLO11改进|注意力机制篇|引入上下文锚注意力机制CAA

目录 一、【CAA】注意力机制1.1【CAA】注意力介绍1.2【CAA】核心代码 二、添加【CAA】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【CAA】注意力机制 1.1【CAA】注意力介绍 CAA注意力机制的结构图如下&#xff0c;下面根据…

Selenium WebDriver和Chrome对照表

PS&#xff1a;我的没下载WebDriver 也没配置环境变量 也能用Selenium 网上有说把WebDriver放到chrome的安装目录并将路径配到path中【可能之前用playwright下载过】 查看浏览器版本号 在浏览器的地址栏&#xff0c;输入chrome://version/&#xff0c;回车后即可查看到对应版…

Java项目实战II基于Java+Spring Boot+MySQL的智能推荐的卫生健康系统(源码+数据库+文档)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者 一、前言 在健康意识日益增强的今天&#xff0c;如何为用户提供个性化、精准的卫生健康建议成为了一个亟待解决…

java中的多层循环控制,包括金字塔和九九乘法表的打印

多重循环控制 多重循环控制练习 多重循环控制 1.将一个循环放在另一个循环体内&#xff0c;就形成了嵌套循环。其中&#xff0c;for&#xff0c;while&#xff0c;do…while均可以作为外层循环和内层循环。【建议一般用两层&#xff0c;最多不要超过3层&#xff0c;否则代码的…

【前端】前端数据转化为后端数据

【前端】前端数据转化为后端数据 写在最前面格式化数组代码解释hasOwnProperty是什么&#xff1f; &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&#xff0c;挖掘无限…

k8s实战-3

k8s实战-3 一、Ingress1.安装2.测试 二、存储抽象1.环境准备2.PV和PVC3.ConfigMap4.Secret 总结 一、Ingress Ingress 类似于一个“网关”&#xff0c;它负责将外部 HTTP 请求路由到集群内的服务。你可以把它想象成一个“交通警察”&#xff0c;根据请求的 URL 和路径&#xf…

无锡自闭症康复寄宿学校:每天的康复方式揭秘

无锡自闭症康复寄宿学校的启示&#xff1a;揭秘广州星贝育园的日常康复方式 在自闭症儿童的教育与康复领域&#xff0c;每一所学校都在用自己的方式探索着前行的道路。无锡的自闭症康复寄宿学校以其独特的康复方式和显著的效果&#xff0c;为众多家庭带来了希望。而在广州&…

jvisualvm学习

系列文章目录 JavaSE基础知识、数据类型学习万年历项目代码逻辑训练习题代码逻辑训练习题方法、数组学习图书管理系统项目面向对象编程&#xff1a;封装、继承、多态学习封装继承多态习题常用类、包装类、异常处理机制学习集合学习IO流、多线程学习仓库管理系统JavaSE项目员工…

前端工程化 - Vue

环境准备 Vue-cli是Vue官方提供的一个脚手架&#xff0c;用户快速生成一个Vue的项目模板。 Vue-cli提供了如下功能&#xff1a; 统一的目录结构本地调试热部署单元测试集成打包上线 需要安装Node.js 安装Vue-cli npm install -g vue/cli通过vue --version指令查看是否安装成…

蓝桥杯省赛真题打卡day4

[蓝桥杯 2013 省 A] 大臣的旅费 题目描述 很久以前&#xff0c;T 王国空前繁荣。为了更好地管理国家&#xff0c;王国修建了大量的快速路&#xff0c;用于连接首都和王国内的各大城市。 为节省经费&#xff0c;T 国的大臣们经过思考&#xff0c;制定了一套优秀的修建方案&am…

模电中二极管,三极管和电容的应用

&#x1f3c6;本文收录于《全栈Bug调优(实战版)》专栏&#xff0c;主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&am…

使用 Python 遍历文件夹

要解决这个问题&#xff0c;使用 Python 的标准库可以很好地完成。我们要做的是遍历目录树&#xff0c;找到所有的 text 文件&#xff0c;读取内容&#xff0c;处理空行和空格&#xff0c;并将处理后的内容合并到一个新的文件中。 整体思路&#xff1a; 遍历子目录&#xff1…

三维模型点云化工具V1.0使用介绍:将三维模型进行点云化生成

三维软件绘制的三维模型导入之后&#xff0c;可以生成点云&#xff0c;用于替代实际的激光扫描过程&#xff0c;当然&#xff0c;主要是用于点云算法的测试和验证&#xff0c;没法真正模拟扫描的效果&#xff0c;因为太过于理想化了。 功能介绍 将三维软件绘制的三维模型变成…