〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
- 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
- 🏆 白宝书系列
- 🏅 启示录 - 攻城狮的自我修养
- 🏅 Python全栈白宝书
- 🏅 ChatGPT实践指南白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐ 改变元素节点的css样式
- ⭐ 改变元素节点的HTML属性
- ⭐ 扩展：nodeType常用属性值
⭐ 改变元素节点的css样式
改变元素节点的CSS样式的语法示例：
oBox.style.backgroundColor = 'red';
oBox.style.backgroundImage = 'url(images/1.png)';
oBox.style.fontSize = '32px';
需要注意的是，属性的名字要用”驼峰“的形式去写（因为js中短横线就是减号，所以不能用短横线写）。
所以，想要改变一个css的属性值，就用上面的语法形式写就可以了。
为什么要使用js来改变css的样式呢？这个在后面写到事件监听的时候会有很大的用处，比如监听到鼠标点击按钮的事件，就可以利用js改变按钮的样式，呈现出很好的动画效果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div id="box"></div><script>var box = document.getElementById('box'); //获取元素节点box.style.backgroundColor = 'green'; //改变背景颜色box.style.borderRadius = '50%'; //改变圆角</script>
</body>
</html>
设置的样式是通过”行内“的形式设置的：
⭐ 改变元素节点的HTML属性
标准W3C属性，如src、href等等，只需要直接打点进行更改即可
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="/images/1.jpg" alt="" id="pic"><a href="https://www.baidu.com/" id="baidu">去百度</a><script>//获取节点var oPic = document.getElementById('pic');var oLink = document.getElementById('baidu');//更改HTML属性oPic.src = '/images/2.jpg';oLink.href = 'https://news.baidu.com/';oLink.innerText = '去百度新闻';</script>
</body>
</html>
不符合W3C标准的属性，如data-n等等，需使用
setAttribute()和getAttribute()来设置、读取。
setAttribute()设置属性值
getAttribute()获取属性值不符合W3C标准的属性是在开发过程中自定义的，为了在具体的业务场景使用，在这里不必纠结这个属性的意义。
示例代码：
<body><div id="box"></div><script>var box = document.getElementById('box');box.setAttribute('data-n', 10); //设置一个不符合W3C规范的属性var n = box.getAttribute('data-n'); //获取一个不符合W3C规范的属性值alert(n);</script>
</body>
⭐ 扩展：nodeType常用属性值
节点的nodeType属性可以显示这个节点具体的类型。
| nodeType | 节点类型 |
|---|---|
| 1 | 元素节点，例如<p>和<div> |
| 3 | 文字节点 |
| 8 | 注释节点 |
| 9 | document节点 |
| 10 | DT节点 |
相关文章：
〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性
说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作…...
【word技巧】Word制作试卷，ABCD选项如何对齐？
使用word文件制作试卷，如何将ABCD选项全部设置对齐？除了一直按空格或者Tab键以外，还有其他方法吗？今天分享如何将ABCD选项对齐。 首先，我们打开【替换和查找】，在查找内容输入空格，然后点击全部…...
OpenHarmony 4.1计划明年Q1发布， 5.0预计Q3发布
据HarmonyOS官方组织透露，OpenHarmony 4.0 版本已于 10 月 26 日正式发布，开发套件同步升级到 API 10。开放原子开源基金会现更新了 OpenHarmony 4.1&5.0 版本路线图。据介绍，OpenHarmony 4.1 Beta 版本预计将于年底完成测试并发布&#…...
蓝桥等考C++组别八级002
第一部分：选择题 1、C++ L8 （15分） 整数12，8的最小公倍数是（ ）。 A. 4 B. 16 C. 24 D. 48 正确答案：C 2、C+&#...
秋招JAVA面经总结
面试的范围是Java基础+Java并发+Java框架+mysql+网络。 Java基础 重载与重写有什么区别？ 重载（Overloading）指的是在同一个类中，可以有多个同名方法，它们具有不同的参数列表（参数类型、参数个数或参数顺序不同），编译器根据调用时的参数类型来决定调用哪个方法。 重写…...
Postgresql源码（116）提升子查询案例分析
0 总结 对于SQL：select * from student, (select * from score where sno > 2) s where student.sno s.sno; pullup在pull_up_subqueries函数内递归完成，分几步： 将内层rte score追加到上层rtbable中：rte1是student、rte2带…...
CNP实现应用CD部署
上一篇整体介绍了cnp的功能，这篇重点介绍下CNP产品应用开发的功能。 简介 CNP的应用开发，主要是指的应用CD部署的配置管理。 应用列表，用来创建一个应用，一般与项目对应，也可以多个应用对应到一个项目。具体很灵活。…...
kubeadm join 192.168.10.16:6443 --token xxx报错Failed to request cluster-info
1、node节点执行 kubeadm join 192.168.10.16:6443 --token hak4zi.hrib9uv4p62t1uok --discovery-token-ca-cert-hash sha256:4337638eef783ee6a66045ad699722079e071c2dfbaa21e37d3174f04d58ea97 --v2 报错 [discovery] Failed to request cluster-info, will try again: G…...
车载以太网-传输层-TCP
文章目录 TCP协议TCP协议报文格式TCP报文的示例TCP建立连接TCP断开连接TCP协议测试TCP协议 车载以太网TCP协议是一种在车载以太网网络中使用的传输控制协议（TCP）。它是一种面向连接的协议，用于在车辆之间或车辆与基础设施之间传输数据。TCP协议提供了可靠的数据传输，确保数…...
java：简单入门定时任务的几种方式Timer、Quartz、Spring Task
背景 后端的定时任务在许多应用中都扮演着重要的角色，它们可用于处理重复性任务、执行定期操作或处理需要定时触发的任务。以下是一些使用场景的示例： 数据同步：在分布式系统中，不同系统之间经常需要进行数据同步。例如…...
木子-前端-方法标签属性小记（普通jsp/html篇）2023~2024
目录 1、如何在前端页面将base转成存进input的图片格式 2、通过前端页面判断当前使用方式PC端还是手机端的极简易方法 1、如何在前端页面将base转成存进input的图片格式 不是直接存进input里，只是将文件转成对应的格式。 data.picPath是base64编码，我…...
音视频项目—基于FFmpeg和SDL的音视频播放器解析（十七）
介绍 在本系列，我打算花大篇幅讲解我的 gitee 项目音视频播放器，在这个项目，您可以学到音视频解封装，解码，SDL渲染相关的知识。您对源代码感兴趣的话，请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…...
使用netty实现WebSocket协议通信
服务器与浏览器之间实现通信，一般都是由浏览器发起http请求，服务端对http请求进行响应，要实现服务端主动向浏览器推送数据，一般采用的方案都是websocket主动推送，或者前端实现轮询方式拉取数据，轮询方式多少…...
uniapp开发小程序，包过大解决方案
1、首先和大家说一下 微信小程序 主包限制不能超过2M 分包一共不能超过8M 然后具体解决优化步骤如下， 将主包进行分包 在pages.json 下subPackages里面进行配置分包 分包配置完 配置过的文件都需要进行修改对应的路径 2 、 在运行的时候 一定要勾选 压缩代码 有…...
Go语言中string与byte转换
简介 string与byte的转换是最常见的一种，通常我们会使用强转方式，但其实还有另一种更加高效的方式，本文会演示两种转换方式。 普通转换 func main() {fmt.Println([]byte("abcd"))fmt.Println(string([]byte{1, 2, 3})) }输出 […...
机器学习8：在病马数据集上进行算法比较（ROC曲线与AUC）
ROC曲线与AUC。使用不同的迭代次数（基模型数量）进行 Adaboost 模型训练，并记录每个模型的真阳性率和假阳性率，并绘制每个模型对应的 ROC 曲线，比较模型性能，输出 AUC 值最高的模型的迭代次数和 ROC 曲线。 …...
70. 爬楼梯 --力扣 --JAVA
题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 解题思路 通过对爬楼梯进行分解，爬到当前台阶的方式分为两种，即由上一个台阶通过爬1和上两个台阶爬2，同公…...
体感互动游戏VR游戏AR体感游戏软件开发
随着科技的不断发展，体感互动游戏正逐渐成为游戏行业的一个重要趋势。这类游戏通过利用传感器、摄像头和运动控制器等技术，使玩家能够通过身体动作与游戏进行实时互动，极大地提升了娱乐体验。 1. 游戏设计与互动元素 体感互动游戏的核心在于…...
计算3个点的6种分布在平面上的占比
假设平面的尺寸是6*6，用11的方式构造2，在用21的方式构造3 2 2 2 1 2 2 2 2 2 1 2 2 2 2 2 1 2 2 3 3 3 x 3 3 2 2 2 1 2 2 2 2 2 1 2 2 在平面上有一个点x，11的操作吧平面分成了3部分2a1，2a…...
【香橙派】实战记录1——简介及烧录 Linux 镜像
文章目录 一、简介1、参数2、结构3、其他配件4、下载资料 二、基于 Windows PC 将 Linux 镜像烧写到 TF 卡的方法1、使用 balenaEtcher 烧录 Linux 镜像的方法2、效果 一、简介 Orange Pi Zero 3 香橙派是一款开源的单板卡片电脑， 新一代的arm64开发板，…...
CV计算机视觉每日开源代码Paper with code速览
墙裂推荐：想获取更多前沿论文及算法优化idea冲击顶会或发表专利，包含目标检测、目标跟踪、图像分割、视频分割、Visual Grounding、可见光红外融合、多任务学习、多模态基础模型、文生图、自动驾驶、BEV、占用预测、具身智能VLA、深度估计、动作识别、表…...
AI的逻辑结构
LLM（大语言模型）：AI技术的核心，决定这个AI，以下Token，Context 等等的能力Token（算力）：限制AI 能够回答多少东西Context（上下文）： 记忆…...
Windows微信批量消息发送终极指南：3步轻松搞定群发任务
Windows微信批量消息发送终极指南：3步轻松搞定群发任务 【免费下载链接】WeChat-mass-msg 微信自动发送信息，微信群发消息，Windows系统微信客户端（PC端 项目地址: https://gitcode.com/gh_mirrors/we/WeChat-mass-msg 还在…...
保姆级避坑指南：在VMware Workstation 17上搞定macOS Ventura虚拟机（附Intel/AMD配置差异）
VMware Workstation 17上完美运行macOS Ventura虚拟机的终极指南 在Windows环境下运行macOS虚拟机一直是开发者和技术爱好者的热门需求，尤其是对于需要跨平台测试或体验苹果生态的用户。然而，这个过程充满了各种技术陷阱和兼容性问题。本文将深入探讨在V…...
创业个体2026 AI数字人软件选型：10 款轻量化工具易上手省成本
摘要如果你正考虑用AI数字人开启副业或为线下生意引流，市面上几十款工具鱼龙混杂，选错一个就是几百上千元的试错成本。本文抛开厂家营销话术，用真实的评测标准实测了10款轻量化AI数字人软件，从功能完整性、上手难度、成本控制三个…...
告别驱动烦恼：Win10/Win11下STM32CubeProgrammer与DFU驱动一键安装全攻略
告别驱动烦恼：Win10/Win11下STM32CubeProgrammer与DFU驱动一键安装全攻略 对于嵌入式开发者来说，STM32CubeProgrammer无疑是一个不可或缺的工具。然而，在Windows 10和Windows 11系统上安装这个软件时，很多用户都会遇到各种驱动兼容…...
OpenClaw部署工具包：一键自动化安装与ROS集成指南
1. 项目概述：一个为“OpenClaw”项目量身定制的部署工具包如果你在开源社区里混迹过一段时间，特别是对机器人、机械臂或者自动化控制项目感兴趣，那么你很可能听说过“OpenClaw”这个名字。它通常指代一个开源的、模块化的机械爪或夹持器项目&…...
Python 3.12升级后pip直接罢工？一招‘ensurepip’命令救活你的包管理器（附详细步骤）
Python 3.12升级后pip罢工？官方推荐的终极修复方案 刚升级到Python 3.12的开发者们，是否遇到了一个令人抓狂的问题——pip命令突然无法使用了？这就像买了一辆新车却发现油箱盖打不开一样让人沮丧。别担心，这不是你一个人的问题&am…...
别再死记硬背了！用一张图搞懂Cortex-M3/M4的MSP和PSP（附FreeRTOS实战配置）
可视化拆解Cortex-M3/M4双堆栈机制：从时序图到FreeRTOS实战配置 第一次接触Cortex-M系列处理器的双堆栈设计时，我也曾被MSP和PSP的概念绕得晕头转向。直到在调试一个任务崩溃导致系统锁死的问题时，才真正理解这种硬件级隔离机制的精妙之处—…...
别再死磕乐理书了！5分钟搞懂钢琴谱里的‘小尾巴’——倚音到底怎么弹
钢琴谱里的‘小尾巴’：5分钟掌握倚音演奏精髓 第一次看到钢琴谱上那些小小的音符时，我完全懵了——它们像调皮的小精灵，躲在主音符旁边，既不像装饰音那样显眼，又不像普通音符那样规整。直到老师告诉我这叫"倚音&…...