当前位置： 首页 > news >正文

〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

news 2026/2/17 11:22:47
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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>

设置的样式是通过”行内“的形式设置的：

image-20230403145652035

⭐ 改变元素节点的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>

image-20230403152018433

不符合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>

image-20230403154026111

⭐ 扩展：nodeType常用属性值

节点的nodeType属性可以显示这个节点具体的类型。

nodeType节点类型
1元素节点，例如<p>和<div>
3文字节点
8注释节点
9document节点
10DT节点

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/22 17:09:09

【word技巧】Word制作试卷，ABCD选项如何对齐？

使用word文件制作试卷&#xff0c;如何将ABCD选项全部设置对齐&#xff1f;除了一直按空格或者Tab键以外&#xff0c;还有其他方法吗&#xff1f;今天分享如何将ABCD选项对齐。 首先&#xff0c;我们打开【替换和查找】&#xff0c;在查找内容输入空格&#xff0c;然后点击全部…...

编程日记 2023/11/22 17:08:07

OpenHarmony 4.1计划明年Q1发布， 5.0预计Q3发布

据HarmonyOS官方组织透露&#xff0c;OpenHarmony 4.0 版本已于 10 月 26 日正式发布&#xff0c;开发套件同步升级到 API 10。开放原子开源基金会现更新了 OpenHarmony 4.1&5.0 版本路线图。据介绍&#xff0c;OpenHarmony 4.1 Beta 版本预计将于年底完成测试并发布&#…...

编程日记 2023/11/22 17:07:06

蓝桥等考C++组别八级002

第一部分：选择题 1、C++ L8 （15分） 整数12，8的最小公倍数是（ ）。 A. 4 B. 16 C. 24 D. 48 正确答案：C 2、C+&#...

编程日记 2023/11/22 17:06:05

秋招JAVA面经总结

面试的范围是Java基础+Java并发+Java框架+mysql+网络。 Java基础 重载与重写有什么区别？ 重载（Overloading）指的是在同一个类中，可以有多个同名方法，它们具有不同的参数列表（参数类型、参数个数或参数顺序不同），编译器根据调用时的参数类型来决定调用哪个方法。 重写…...

编程日记 2023/11/22 17:05:04

Postgresql源码（116）提升子查询案例分析

0 总结 对于SQL&#xff1a;select * from student, (select * from score where sno > 2) s where student.sno s.sno; pullup在pull_up_subqueries函数内递归完成&#xff0c;分几步&#xff1a; 将内层rte score追加到上层rtbable中&#xff1a;rte1是student、rte2带…...

编程日记 2023/11/22 17:04:03

CNP实现应用CD部署

上一篇整体介绍了cnp的功能&#xff0c;这篇重点介绍下CNP产品应用开发的功能。 简介 CNP的应用开发&#xff0c;主要是指的应用CD部署的配置管理。 应用列表&#xff0c;用来创建一个应用&#xff0c;一般与项目对应&#xff0c;也可以多个应用对应到一个项目。具体很灵活。…...

编程日记 2023/11/22 17:03:02

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…...

编程日记 2023/11/22 17:02:01

车载以太网-传输层-TCP

文章目录 TCP协议TCP协议报文格式TCP报文的示例TCP建立连接TCP断开连接TCP协议测试TCP协议 车载以太网TCP协议是一种在车载以太网网络中使用的传输控制协议（TCP）。它是一种面向连接的协议，用于在车辆之间或车辆与基础设施之间传输数据。TCP协议提供了可靠的数据传输，确保数…...

编程日记 2023/11/22 17:01:00

java：简单入门定时任务的几种方式Timer、Quartz、Spring Task

背景 后端的定时任务在许多应用中都扮演着重要的角色&#xff0c;它们可用于处理重复性任务、执行定期操作或处理需要定时触发的任务。以下是一些使用场景的示例&#xff1a; 数据同步&#xff1a;在分布式系统中&#xff0c;不同系统之间经常需要进行数据同步。例如&#xf…...

编程日记 2023/11/22 16:59:59

木子-前端-方法标签属性小记（普通jsp/html篇）2023~2024

目录 1、如何在前端页面将base转成存进input的图片格式 2、通过前端页面判断当前使用方式PC端还是手机端的极简易方法 1、如何在前端页面将base转成存进input的图片格式 不是直接存进input里&#xff0c;只是将文件转成对应的格式。 data.picPath是base64编码&#xff0c;我…...

编程日记 2023/11/22 16:58:57

音视频项目—基于FFmpeg和SDL的音视频播放器解析（十七）

介绍 在本系列&#xff0c;我打算花大篇幅讲解我的 gitee 项目音视频播放器&#xff0c;在这个项目&#xff0c;您可以学到音视频解封装&#xff0c;解码&#xff0c;SDL渲染相关的知识。您对源代码感兴趣的话&#xff0c;请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…...

编程日记 2023/11/22 16:57:56

使用netty实现WebSocket协议通信

服务器与浏览器之间实现通信&#xff0c;一般都是由浏览器发起http请求&#xff0c;服务端对http请求进行响应&#xff0c;要实现服务端主动向浏览器推送数据&#xff0c;一般采用的方案都是websocket主动推送&#xff0c;或者前端实现轮询方式拉取数据&#xff0c;轮询方式多少…...

编程日记 2023/11/22 16:56:55

uniapp开发小程序，包过大解决方案

1、首先和大家说一下 微信小程序 主包限制不能超过2M 分包一共不能超过8M 然后具体解决优化步骤如下&#xff0c; 将主包进行分包 在pages.json 下subPackages里面进行配置分包 分包配置完 配置过的文件都需要进行修改对应的路径 2 、 在运行的时候 一定要勾选 压缩代码 有…...

编程日记 2023/11/22 16:55:54

Go语言中string与byte转换

简介 string与byte的转换是最常见的一种&#xff0c;通常我们会使用强转方式&#xff0c;但其实还有另一种更加高效的方式&#xff0c;本文会演示两种转换方式。 普通转换 func main() {fmt.Println([]byte("abcd"))fmt.Println(string([]byte{1, 2, 3})) }输出 […...

编程日记 2023/11/22 16:53:51

机器学习8：在病马数据集上进行算法比较（ROC曲线与AUC）

ROC曲线与AUC。使用不同的迭代次数&#xff08;基模型数量&#xff09;进行 Adaboost 模型训练&#xff0c;并记录每个模型的真阳性率和假阳性率&#xff0c;并绘制每个模型对应的 ROC 曲线&#xff0c;比较模型性能&#xff0c;输出 AUC 值最高的模型的迭代次数和 ROC 曲线。 …...

编程日记 2023/11/22 16:51:49

70. 爬楼梯 --力扣 --JAVA

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 解题思路 通过对爬楼梯进行分解&#xff0c;爬到当前台阶的方式分为两种&#xff0c;即由上一个台阶通过爬1和上两个台阶爬2&#xff0c;同公…...

编程日记 2023/11/22 16:50:47

体感互动游戏VR游戏AR体感游戏软件开发

随着科技的不断发展&#xff0c;体感互动游戏正逐渐成为游戏行业的一个重要趋势。这类游戏通过利用传感器、摄像头和运动控制器等技术&#xff0c;使玩家能够通过身体动作与游戏进行实时互动&#xff0c;极大地提升了娱乐体验。 1. 游戏设计与互动元素 体感互动游戏的核心在于…...

编程日记 2023/11/22 16:49:45

计算3个点的6种分布在平面上的占比

假设平面的尺寸是6*6&#xff0c;用11的方式构造2&#xff0c;在用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&#xff0c;11的操作吧平面分成了3部分2a1&#xff0c;2a…...

编程日记 2023/11/22 16:48:44

【香橙派】实战记录1——简介及烧录 Linux 镜像

文章目录 一、简介1、参数2、结构3、其他配件4、下载资料 二、基于 Windows PC 将 Linux 镜像烧写到 TF 卡的方法1、使用 balenaEtcher 烧录 Linux 镜像的方法2、效果 一、简介 Orange Pi Zero 3 香橙派是一款开源的单板卡片电脑&#xff0c; 新一代的arm64开发板&#xff0c;…...

编程日记 2023/11/22 16:47:43

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/14 7:07:29

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/13 6:28:40

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/2/16 3:55:51

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07