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

学习笔记

  • 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");// 修改背景颜色为绿色,字体颜色为红色,字体大小为30pxdivElement.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.rhkb.cn/news/440672.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录 | Day29 | 回溯算法:电话号码的字母组合组合总和

代码随想录 | Day29 | 回溯算法&#xff1a;电话号码的字母组合&&组合总和 关于这个章节&#xff0c;大家最好是对递归函数的理解要比较到位&#xff0c;听着b站视频课可能呢才舒服点&#xff0c;可以先去搜一搜关于递归函数的讲解&#xff0c;理解&#xff0c;再开始…

CSS入门

文章目录 CSS入门一、CSS概述1、概述2、CSS的作用3、初体验4、CSS基础语法4、HTML引入CSS 二、选择器 ⭐️⭐️⭐️1、基本选择器2、扩展选择器3、超链接选择器 三、样式权重问题1、权重计算规则2、权重示例3、具体示例4、 !important 四、CSS常用样式1、字体和文本属性2、背景…

2530 电力电子技术

1.晶闸管 视频链接&#xff1a;2.3半控型器件-晶闸管_哔哩哔哩_bilibili 可参考文章链接&#xff1a;电力电子技术笔记&#xff08;3&#xff09;——晶闸管_双晶体管模型正反馈-CSDN博客 半控型器件&#xff1a;门极只有在导通时有用&#xff0c;在关闭时没有用 2.Boost升压…

【C++】二叉搜索树+变身 = 红黑树

&#x1f680;个人主页&#xff1a;小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言一、定义与性质二、红黑树节点的定义三、新增节点插入四、验证红黑树五、AVL树和红黑树比较 前言 本文仅适合了…

[3.4]【机器人运动学MATLAB实战分析】PUMA560机器人逆运动学MATLAB计算

PUMA560是六自由度关节型机器人,其6个关节都是转动副,属于6R型操作臂。各连杆坐标系如图1,连杆参数如表1所示。 图1 PUMA560机器人的各连杆坐标系 表1 PUMA560机器人的连杆参数 用代数法对其进行运动学反解。具体步骤如下: 1、求θ1 PMUMA56

MFC有三个选项:MFC ActiveX控件、MFC应用程序、MFC DLL,如何选择?

深耕AI&#xff1a;互联网行业 算法研发工程师 ​ 目录 MFC ActiveX 控件 控件的类型 标准控件 自定义控件 ActiveX控件 MFC ActiveX控件 标准/自定义控件 MFC ActiveX控件分类 3种MFC如何选择&#xff1f; MFC ActiveX控件 MFC 应用程序 MFC DLL 总结 举例说明…

低照度图像增强网络——EnlightenGAN

系列文章目录 GAN生成对抗网络介绍https://blog.csdn.net/m0_58941767/article/details/142704354?spm1001.2014.3001.5501 循环生成对抗网络——CycleGANhttps://blog.csdn.net/m0_58941767/article/details/142704671?spm1001.2014.3001.5501 目录 系列文章目录 前言 …

链表排序

目录 插入排序 LeetCode147 对链表进行插入排序 归并排序 LeetCode148 排序链表 插入排序 LeetCode147 对链表进行插入排序 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}…

深度学习中的优化方法(Momentum,AdaGrad,RMSProp,Adam)详解及调用

深度学习中常用的优化方法包括啦momentum(动量法),Adagrad(adaptive gradient自适应梯度法),RMSProp(root mean square propagation均方根传播算法),Adam(adaptive moment estimation自适应矩估计法) 指数加权平均算法 所谓指数加权平均算法是上述优化算法的基础,其作用是对历…

word无法复制粘贴

word无法复制粘贴 使用word时复制粘贴报错 如下&#xff1a; 报错&#xff1a;运行时错误‘53’&#xff0c;文件未找到&#xff1a;MathPage.WLL 这是mathtype导致的。 解决方法 1&#xff09;在mathtype下载目录下找到"\MathType\MathPage\64"下的"mathpa…

Python并发编程挑战与解决方案

Python并发编程挑战与解决方案 并发编程是现代软件开发中的一项核心能力&#xff0c;它允许多个任务同时运行&#xff0c;提高程序的性能和响应速度。Python因其易用性和灵活性而广受欢迎&#xff0c;但其全局解释器锁&#xff08;GIL&#xff09;以及其他特性给并发编程带来了…

python数据分析与可视化工具介绍-matplotlib库

众所周知&#xff0c;python的数据分析库主要是numpy&#xff0c;pandas&#xff0c;和matplotlib&#xff0c;而前面两个主要是数据处理工具库&#xff0c;最后一个才是真正的作图展示工具库。本节来学习一下matploatlib工具库的使用。 Matplotlib常用绘图函数 pyplot简介 m…

Oracle中TRUNC()函数详解

文章目录 前言一、TRUNC函数的语法二、主要用途三、测试用例总结 前言 在Oracle中&#xff0c;TRUNC函数用于截取或截断日期、时间或数值表达式的部分。它返回一个日期、时间或数值的截断版本&#xff0c;根据提供的格式进行截取。 一、TRUNC函数的语法 TRUNC(date) TRUNC(d…

字符编码发展史5 — UTF-16和UTF-32

上一篇《字符编码发展史4 — Unicode与UTF-8》我们讲解了Unicode字符集与UTF-8编码。本篇我们将继续讲解字符编码的第三个发展阶段中的UTF-16和UTF-32。 2.3. 第三个阶段 国际化 2.3.2. Unicode的编码方式 2.3.2.2. UTF-16 UTF-16也是一种变长编码&#xff0c;对于一个Unic…

1、如何查看电脑已经连接上的wifi的密码?

在电脑桌面右下角的如下位置&#xff1a;双击打开查看当前连接上的wifi的名字&#xff1a;ZTE-kfdGYX-5G 按一下键盘上的win R 键, 输入【cmd】 然后&#xff0c;按一下【回车】。 输入netsh wlan show profile ”wifi名称” keyclear : 输入完成后&#xff0c;按一下回车&…

浏览器前端向后端提供服务

WEB后端向浏览器前端提供服务是最常见的场景&#xff0c;前端向后端的接口发起GET或者POST请求&#xff0c;后端收到请求后执行服务器端任务进行处理&#xff0c;完成后向前端发送响应。 那浏览器前端向后端提供服务是什么鬼&#xff1f; 说来话长&#xff0c;长话短说。我在人…

AFSim仿真系统 --- 系统简解_06 平台及平台类型

平台及平台类型 在AFSIM模拟中&#xff0c;当在被模拟的场景中定义平台时&#xff0c;创建仿真实体&#xff08;如车辆和结构&#xff09;。 AFSIM是一个用于创建仿真的对象框架&#xff0c;而平台封装了对象的原则身份或定义。 平台可以拥有系统&#xff08;或平台部分&#x…

自然语言处理-语言转换

文章目录 一、语言模型二、统计语言模型1.含义与方法2.存在的问题 三、神经语言模型1.含义与方法2.one-hot编码3.词嵌入-word2vec4.模型的训练过程 四、总结 自然语言处理&#xff08;NLP&#xff09;中的语言转换方法主要涉及将一种形式的语言数据转换为另一种形式&#xff0c…

[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

场景 在开发Cocoa程序时&#xff0c;由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法&#xff1f; 说明 开发界面的时候&#xff0c;经常是需要在子界面里传递数据给主界面&#xff0…

Windows 搭建 Gitea

一、准备工作 1. 安装 Git&#xff1a;Gitea 依赖 Git 进行代码管理&#xff0c;所以首先需要确保系统中安装了 Git。 下载地址&#xff1a;https://git-scm.com/downloads/win 2. 安装数据库&#xff08;可选&#xff09; 默认情况下&#xff0c;Gitea 使用 SQLite 作为内…