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

JavaScript（四）DOM及CSS操作

news 2026/2/10 8:51:59

1、DOM简介

在这里插入图片描述

在这里插入图片描述
DocumentType: Html的声明标签
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><SCript>console.log(document);   // document代表整改文档if(document.nodeType ===9){console.log("顶层节点");}</SCript>
</body>
</html>

2、document对象获取元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、document对象创建元素

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="nav">导航</div><div id="contaniner"></div><script>//创建元素var p_text = document.createElement("p");console.log(p_text);// 创建文本信息var p_content = document.createTextNode("Js创建文本信息");// appendChild:将内容或者子元素放到容器中p_text.appendChild(p_content);console.log(p_text);//创建属性var P_id = document.createAttribute("id");// 给属性赋值P_id.value = "darly";console.log(P_id);// 将属性设置到相应标签中p_text.setAttributeNode(P_id);console.log(p_text);//将创建的元素显示在页面上//首先获取需要放置的父级元素var contaniner = document.getElementById("contaniner");console.log(contaniner);contaniner.appendChild(p_text);</script>
</body>
</html>

4、Element属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
InnerHTML可以识别标签
innerText会把标签识别成一个字符串
在这里插入图片描述

5、获取元素位置

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;border: 5px solid red;padding: 10px;margin: 20px;background-color: green;}h1{height: 500px;}</style>
</head>
<body><div class="box" id="boxid"></div><h1>标题内容1</h1><h1>标题内容2</h1><h1>标题内容3</h1><h1>标题内容4</h1><h1>标题内容5</h1><h1>标题内容6</h1><script>//获取元素var boxobj = document.getElementById("boxid")//获取元素大小console.log(boxobj.clientHeight); //打印元素高度  包括pading值220（200+10+10）console.log(boxobj.clientWidth);  //打印元素宽度，包括pading值220（200+10+10）//获取视口高度(屏幕高度)console.log(document.documentElement.clientHeight);//获取网页总高度（页面高度，指页面内容高度，空白部分不算页面高度console.log(document.body.clientHeight);console.log("===clientHeight及clientWidth与scrollHeight和scrollWidth区别不大，\实际应用场景中也很少将内容隐藏=========== ");console.log(boxobj.scrollHeight); //打印元素高度  包括pading值220（200+10+10）console.log(boxobj.scrollWidth);  //打印元素宽度，包括pading值220（200+10+10）//获取视口高度(屏幕高度)console.log(document.documentElement.scrollHeight);//获取网页总高度（页面高度，指页面内容高度，空白部分不算页面高度console.log(document.body.scrollHeight);console.log("================================");//scrollLeft和scrollTop//获取滚动高度console.log(document.documentElement.scrollTop);console.log("================================");//offsetHeight、offsetWidthconsole.log(boxobj.offsetHeight); //打印元素高度  包括pading和border值230（200+2*10+2*5）console.log(boxobj.offsetWidth);  console.log("================================");//offsetHeight、offsetWidthconsole.log(boxobj.offsetLeft); //左边距距离有定位的父级元素距离（有定位父级元素是指父级元素有position属性定义console.log(boxobj.offsetTop);  //上边距距离有定位的父级元素距离</script></body>
</html>

6、css操作（js操作css）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <style>.box{width: 200px;height: 200px;background-color: red;}</style> -->
</head>
<body><div class="box" id="boxid"></div><script>var box= document.getElementById("boxid")//setAttribute操作CSS属性box.setAttribute("style","width:200px;height:200px;background:red")//通过元素节点的style属性设置box.style.width = "300px";box.style.height = "300px";box.style.backgroundColor = "red";//通过cssText设置box.style.cssText = "width:200px;height:200px;background:red";</script>
</body>
</html>

相关文章：

JavaScript（四）DOM及CSS操作

1、DOM简介 DocumentType: Html的声明标签 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docume…...

编程日记 2023/8/4 15:33:40

window中，关闭java占用端口的进程

查看端口被占用的情况 netstat -ano|findstr "端口号"使用Tasklist查看对于 PID 的进程名 tasklist|findstr "PID号"通过 taskkill 命令方式结束进程 taskkill /f /t /im Pid...

编程日记 2023/8/4 15:32:37

【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )

文章目录 一、RDD#sortBy 方法1、RDD#sortBy 语法简介2、RDD#sortBy 传入的函数参数分析 二、代码示例 - RDD#sortBy 示例1、需求分析2、代码示例3、执行结果 一、RDD#sortBy 方法 1、RDD#sortBy 语法简介 RDD#sortBy 方法 用于 按照 指定的 键 对 RDD 中的元素进行排序 , 该方…...

编程日记 2023/8/4 15:30:34

Elasticsearch官方测试数据导入

一、数据准备 百度网盘链接 链接&#xff1a;https://pan.baidu.com/s/1rPZBvH-J0367yQDg9qHiwQ?pwd7n5n 提取码&#xff1a;7n5n文档格式 {"index":{"_id":"1"}} {"account_number":1,"balance":39225,"firstnam…...

编程日记 2023/8/4 15:29:33

uniapp项目的pdf文件下载与打开查看

最近写的uniapp项目需要新增一个pdf下载和打开查看功能&#xff0c;摸索了半天终于写了出来&#xff0c;现分享出来供有需要的同行参考&#xff0c;欢迎指正 async function DownloadSignature() {//请求后端接口&#xff0c;返回值为一个url地址let resawait req.flow.flowDo…...

编程日记 2023/8/4 15:28:32

DeepVO 论文阅读

论文信息 题目&#xff1a;DeepVO Towards End-to-End Visual Odometry with Deep Recurrent Convolutional Neural Networks 作者&#xff1a;Sen Wang, Ronald Clark, Hongkai Wen and Niki Trigoni 代码地址&#xff1a;http://senwang.gitlab.io/DeepVO/ (原作者并没有开源…...

编程日记 2023/8/4 15:27:30

HOT71-字符串解码

leetcode原题链接: 字符串解码 题目描述 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。你可以认为输入字符串总是有效的&#xff1b;输…...

编程日记 2023/8/4 15:26:28

redis-server进程无法关闭终极解决方案

先使用命令查看6379端口情况&#xff1a; sudo lsof -i :6379 发现redis进程在占用&#xff0c;redis-server进程无论什么手段都杀不死&#xff0c;使用kill -9 pid杀掉pid后又卷土重来&#xff0c;最后找到了下面这个命令 sudo /etc/init.d/redis-server stop ok&#xff0c…...

编程日记 2023/8/4 15:25:27

（5）将固件加载到没有ArduPilot固件的主板上

文章目录 前言 5.1 下载驱动程序和烧录工具 5.2 下载ArduPilot固件 5.3 使用测试版和开发版 5.3.1 测试版 5.3.2 最新开发版本 5.4 将固件上传到自动驾驶仪 5.5 替代方法 5.6 将固件加载到带有外部闪存的主板上 前言 ArduPilot 的最新版本&#xff08;Copter-3.6, Pl…...

编程日记 2023/8/4 15:24:24

wpf画刷学习1

在这2篇博文有提到wpf画刷&#xff0c; https://blog.csdn.net/bcbobo21cn/article/details/109699703 https://blog.csdn.net/bcbobo21cn/article/details/107133703 下面单独学习一下画刷&#xff1b; wpf有五种画刷&#xff0c;也可以自定义画刷&#xff0c;画刷的基类都…...

编程日记 2023/8/4 15:23:23

Opencv C++实现yolov5部署onnx模型完成目标检测

代码分析&#xff1a; 头文件 #include <fstream> //文件 #include <sstream> //流 #include <iostream> #include <opencv2/dnn.hpp> //深度学习模块-仅提供推理功能 #include <opencv2/imgproc.hpp> //图像处理模块 #include &l…...

编程日记 2023/8/4 15:22:21

django bootstrap html实现左右布局，带折叠按钮，左侧可折叠隐藏

一、实现的效果 在django项目中，需要使用bootstrap 实现一个左右分布的布局，左侧区域可以折叠隐藏起来，使得右侧的显示区域变大。（为了区分区域，左右加了配色，不好看的修改颜色即可） 点击折叠按钮，左侧区域隐藏，右侧区域铺满： 二、实现思路 1、使用col-md属性，让左…...

编程日记 2023/8/4 15:21:18

Mapping温度分布验证选择数据记录仪时需要考虑的13件事

01 什么是温度分布验证&#xff1f; 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程&#xff08;如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器&#xff09;的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…...

编程日记 2023/8/4 15:20:15

【题解】 判断一个链表是否为回文结构

判断一个链表是否为回文结构 题目链接&#xff1a;判断一个链表是否为回文结构 解题思路1&#xff1a;借助数组 遍历链表将值都放在数组中&#xff0c;再遍历数组元素&#xff0c;判断该数组是否为一个回文结构 代码如下&#xff1a; bool isPail(ListNode* head) {ListNod…...

编程日记 2023/8/4 15:18:11

Microsoft Message Queuing Denial-of-Service Vulnerability

近期官方公布了一个MSMQ的拒绝服务漏洞&#xff0c;可能因为网络安全设备的更新&#xff0c;影响业务&#xff0c;值得大家关注。 漏洞具体描述参见如下&#xff1a; Name: Microsoft Message Queuing Denial-of-Service Vulnerability Description: Microsoft Message Queuing…...

编程日记 2023/8/4 15:17:10

软件设计师（五）软件工程基础知识

一、软件工程概述 软件开发和维护过程中所遇到的各种问题称为“软件危机”。 软件工程是指应用计算机科学、数学及管理科学等原理&#xff0c;以工程化的原则和方法来解决软件问题的工程&#xff0c;其目的是提高软件生产率、提高软件质量、降低软件成本。 #mermaid-svg-h3j6K…...

编程日记 2023/8/4 15:16:07

Java中的JUnit单元测试方法的使用

Java中的JUnit单元测试方法 使用步骤如下&#xff1a; 选中当前工程 - 右键选择&#xff1a;build path - add libraries - JUnit 4 - 下一步创建Java类&#xff0c;进行单元测试。 此时的Java类要求&#xff1a;① 此类是public的 ②此类提供公共的无参的构造器此类中声明单…...

编程日记 2023/8/4 15:15:06

一文学透设计模式——抽象工厂模式

创建者模式 抽象工厂模式 概念 抽象工厂模式是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 这是很多地方对于抽象工厂模式的描述&#xff0c;说实话感觉不是特别好懂。…...

编程日记 2023/8/4 15:14:05

Vue3与Vue2区别和总结（1）

在2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09; 既然vue2已经存在了六七年之久为什么还要研发vue3呢&#xff1f; 那就不得不提vue3带来的提升了 1.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次…...

编程日记 2023/8/4 15:13:03

【华秋推荐】物联网入门学习模块 ESP8266

随着全球信息技术的不断进步和普及&#xff0c;物联网成为当今备受关注的技术热点之一。通过物理和数字设备之间的连接来实现自动化和互联互通的网络。无线传感器、云计算和大数据分析等技术&#xff0c;物联网使设备能够相互交流和共享信息&#xff0c;实现智能化的自动化操作…...

编程日记 2023/8/4 15:12:02

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53