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

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

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

别再手动模拟I2C了！用STM32F103C8T6的硬件I2C驱动AT24C256（附完整工程）

解锁STM32硬件I2C潜能&#xff1a;高效驱动AT24C256 EEPROM实战指南 在嵌入式开发中&#xff0c;数据存储的可靠性和效率往往直接影响产品性能。许多开发者习惯用GPIO模拟I2C总线与EEPROM通信&#xff0c;这种方式虽然简单直接&#xff0c;但当项目需要更高传输速率或更稳定的数…...

编程新知 2026/5/7 18:05:31

数据库概念结构设计完全指南：从E-R图到建表实战

前言&#xff1a;为什么需要概念结构设计&#xff1f;在数据库系统的开发过程中&#xff0c;设计者通常需要面对一个问题&#xff1a;如何将现实世界中的业务需求准确、高效地转化为计算机能够存储和处理的数据结构&#xff1f;如果直接跳到物理设计&#xff08;也就是写CREATE…...

编程新知 2026/5/7 17:38:24

基于Web的远程命令执行中心部署与安全实践指南

1. 项目概述&#xff1a;远程控制命令中心最近在折腾一个挺有意思的东西&#xff0c;一个叫cducote/remoteCC的开源项目。这个名字听起来有点抽象&#xff0c;但说白了&#xff0c;它就是一个轻量级的、基于Web的远程命令执行与控制中心。想象一下&#xff0c;你手头有几台服务…...

编程新知 2026/5/7 17:01:49

PowerShell脚本环境探测指南

在跨平台开发和脚本执行的过程中，了解脚本运行的环境是非常关键的。尤其是当脚本需要在不同类型的shell环境中运行时，如Bash和PowerShell，脚本行为可能需要根据环境进行调整。本文将通过一个具体的实例，探讨如何在PowerShell脚本中探测调用它的shell环境，并做出相应的响应…...

编程新知 2026/5/7 16:53:37

Windows 10系统优化终极指南：如何用Windows10Debloater一键清理预装垃圾应用

Windows 10系统优化终极指南&#xff1a;如何用Windows10Debloater一键清理预装垃圾应用 【免费下载链接】Windows10Debloater Script to remove Windows 10 bloatware. 项目地址: https://gitcode.com/gh_mirrors/wi/Windows10Debloater 你是否曾为Windows 10系统中那些…...

编程新知 2026/5/7 13:40:32

使用 taotoken cli 工具一键配置开发环境中的 api 访问密钥

使用 Taotoken CLI 工具一键配置开发环境中的 API 访问密钥 在团队协作或个人开发中&#xff0c;为每个项目或工具手动配置大模型 API 密钥和端点是一项重复且容易出错的工作。Taotoken 提供的命令行工具 taotoken/taotoken 旨在简化这一流程&#xff0c;让你能通过简单的命令…...

编程新知 2026/5/7 13:28:12

ARM核心模块信号架构与电源设计解析

1. ARM核心模块信号架构解析 在嵌入式系统硬件设计中&#xff0c;ARM核心模块的信号连接架构直接决定了系统的通信能力和性能上限。以CM926EJ-S和CM1136JF-S为代表的Integrator系列核心模块&#xff0c;采用分层式信号设计理念&#xff0c;通过HDRB高密度连接器实现模块间的堆叠…...

编程新知 2026/5/7 13:07:37

别再为List里的null值排序头疼了！Java 8的Comparator.nullsLast保姆级使用指南

优雅处理Java集合排序中的null值&#xff1a;Comparator.nullsLast深度解析 在日常开发中&#xff0c;处理包含null值的集合排序是个常见痛点。想象一下这样的场景&#xff1a;你从数据库查询用户列表&#xff0c;某些用户的注册时间字段为null&#xff1b;或者调用外部API获取…...

编程新知 2026/5/7 12:25:41

FanControl：Windows免费风扇控制软件终极配置指南

FanControl&#xff1a;Windows免费风扇控制软件终极配置指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/Fan…...

编程新知 2026/5/7 11:33:50

SpringBoot 3.1.3 + JDK 17 实战：手把手教你从零搭建一个OAuth2.1授权服务器

SpringBoot 3.1.3 JDK 17 实战&#xff1a;从零构建OAuth2.1授权服务器的完整指南 在当今微服务架构盛行的时代&#xff0c;安全认证已成为系统设计的核心环节。OAuth2.1作为OAuth2.0的进化版本&#xff0c;针对实际应用中的安全漏洞和模糊定义进行了重要修正。本文将带您使用…...

编程新知 2026/5/7 11:15:17