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

JavaScript（四）DOM及CSS操作

news 2025/8/27 2:40:35

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/8/26 8:28:04

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/8/6 7:06:58

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/8/8 10:09:48

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/8/13 7:14:07

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/8/22 5:22:41

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/7/8 3:08:09

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/7/8 3:17:13

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

编程新知 2025/7/21 16:37:34

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/7/20 12:18:38

ZYNQ学习记录FPGA(二)Verilog语言

一、Verilog简介 1.1 HDL&#xff08;Hardware Description language&#xff09; 在解释HDL之前&#xff0c;先来了解一下数字系统设计的流程&#xff1a;逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端&#xff0c;在这个过程中就需要用到HDL&#xff0c;正文…...

编程新知 2025/8/22 5:19:02