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

JavaScript（四）DOM及CSS操作

news 2026/4/13 18:32:40

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官方测试数据导入

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

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

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

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

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

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

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

HOT71-字符串解码

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

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

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

先使用命令查看6379端口情况： sudo lsof -i :6379 发现redis进程在占用，redis-server进程无论什么手段都杀不死，使用kill -9 pid杀掉pid后又卷土重来，最后找到了下面这个命令 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 的最新版本（Copter-3.6, Pl…...

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

wpf画刷学习1

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

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

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

代码分析： 头文件 #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 什么是温度分布验证？ 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程（如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器）的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…...

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

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

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

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

Microsoft Message Queuing Denial-of-Service Vulnerability

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

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

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

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

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

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

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

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

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

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

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

Vue3与Vue2区别和总结（1）

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

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

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

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

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

Win11Debloat深度解析：模块化架构设计如何实现Windows系统70%性能优化

Win11Debloat深度解析：模块化架构设计如何实现Windows系统70%性能优化【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to d…...

编程新知 2026/4/13 15:59:55

The Algorithms - PHP高级数据结构：AVL树、伸展树与字典树的实现

The Algorithms - PHP高级数据结构：AVL树、伸展树与字典树的实现【免费下载链接】PHP All Algorithms implemented in PHP 项目地址: https://gitcode.com/gh_mirrors/php1/PHP 在计算机科学领域，数据结构是构建高效算法的基础。PHP作为一种广泛…...

编程新知 2026/4/13 15:17:11

MetaBCI脑机接口开发终极指南：从零到精通的完整学习路径

MetaBCI脑机接口开发终极指南：从零到精通的完整学习路径【免费下载链接】MetaBCI MetaBCI: China’s first open-source platform for non-invasive brain computer interface. The project of MetaBCI is led by Prof. Minpeng Xu from Tianjin University, China…...

编程新知 2026/4/13 14:58:21

告别零碎教程！Winform桌面程序连接BLE设备（如智能手环）的完整保姆级流程

告别零碎教程！Winform桌面程序连接BLE设备（如智能手环）的完整保姆级流程在物联网和智能穿戴设备蓬勃发展的今天，BLE（蓝牙低功耗）技术因其低功耗、低成本的特点，成为连接智能手环、健康监测设备…...

编程新知 2026/4/13 14:07:24

TsubakiTranslator：Galgame实时翻译完整指南与终极方案

TsubakiTranslator：Galgame实时翻译完整指南与终极方案【免费下载链接】TsubakiTranslator 一款Galgame文本翻译工具，支持Textractor/剪切板/OCR翻译项目地址: https://gitcode.com/gh_mirrors/ts/TsubakiTranslator 还在为语言障碍而无法畅玩心…...

编程新知 2026/4/13 13:18:34