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

JavaScript（四）DOM及CSS操作

news 2026/2/10 10:36: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

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

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/2/10 10:23:55

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/12/27 19:12:09

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2026/2/10 1:48:49

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

编程新知 2026/1/24 1:45:30

CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？

在现代前端开发中&#xff0c;Utility-First (功能优先) CSS 框架已经成为主流。其中&#xff0c;Tailwind CSS 无疑是市场的领导者和标杆。然而&#xff0c;一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...

编程新知 2026/2/5 16:05:59