JavaScript（四）DOM及CSS操作
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…...
window中，关闭java占用端口的进程
查看端口被占用的情况 netstat -ano|findstr "端口号"使用Tasklist查看对于 PID 的进程名 tasklist|findstr "PID号"通过 taskkill 命令方式结束进程 taskkill /f /t /im Pid...
【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 中的元素进行排序 , 该方…...
Elasticsearch官方测试数据导入
一、数据准备 百度网盘链接 链接：https://pan.baidu.com/s/1rPZBvH-J0367yQDg9qHiwQ?pwd7n5n 提取码：7n5n文档格式 {"index":{"_id":"1"}} {"account_number":1,"balance":39225,"firstnam…...
uniapp项目的pdf文件下载与打开查看
最近写的uniapp项目需要新增一个pdf下载和打开查看功能，摸索了半天终于写了出来，现分享出来供有需要的同行参考，欢迎指正 async function DownloadSignature() {//请求后端接口，返回值为一个url地址let resawait req.flow.flowDo…...
DeepVO 论文阅读
论文信息 题目：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/ (原作者并没有开源…...
HOT71-字符串解码
leetcode原题链接: 字符串解码 题目描述 给定一个经过编码的字符串，返回它解码后的字符串。 编码规则为: k[encoded_string]，表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。你可以认为输入字符串总是有效的；输…...
redis-server进程无法关闭终极解决方案
先使用命令查看6379端口情况： sudo lsof -i :6379 发现redis进程在占用，redis-server进程无论什么手段都杀不死，使用kill -9 pid杀掉pid后又卷土重来，最后找到了下面这个命令 sudo /etc/init.d/redis-server stop ok，…...
（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…...
wpf画刷学习1
在这2篇博文有提到wpf画刷， https://blog.csdn.net/bcbobo21cn/article/details/109699703 https://blog.csdn.net/bcbobo21cn/article/details/107133703 下面单独学习一下画刷； wpf有五种画刷，也可以自定义画刷，画刷的基类都…...
Opencv C++实现yolov5部署onnx模型完成目标检测
代码分析： 头文件 #include <fstream> //文件 #include <sstream> //流 #include <iostream> #include <opencv2/dnn.hpp> //深度学习模块-仅提供推理功能 #include <opencv2/imgproc.hpp> //图像处理模块 #include &l…...
django bootstrap html实现左右布局，带折叠按钮，左侧可折叠隐藏
一、实现的效果 在django项目中，需要使用bootstrap 实现一个左右分布的布局，左侧区域可以折叠隐藏起来，使得右侧的显示区域变大。（为了区分区域，左右加了配色，不好看的修改颜色即可） 点击折叠按钮，左侧区域隐藏，右侧区域铺满： 二、实现思路 1、使用col-md属性，让左…...
Mapping温度分布验证选择数据记录仪时需要考虑的13件事
01 什么是温度分布验证？ 温度分布验证是通过在规定的研究时间内测量定义区域内的多个点来确定特定温度控制环境或过程（如冷冻柜、冰箱、培养箱、稳定室、仓库或高压灭菌器）的温度分布的过程。温度分布验证的目标是确定每个测量点之间的差异&…...
【题解】 判断一个链表是否为回文结构
判断一个链表是否为回文结构 题目链接：判断一个链表是否为回文结构 解题思路1：借助数组 遍历链表将值都放在数组中，再遍历数组元素，判断该数组是否为一个回文结构 代码如下： bool isPail(ListNode* head) {ListNod…...
Microsoft Message Queuing Denial-of-Service Vulnerability
近期官方公布了一个MSMQ的拒绝服务漏洞，可能因为网络安全设备的更新，影响业务，值得大家关注。 漏洞具体描述参见如下： Name: Microsoft Message Queuing Denial-of-Service Vulnerability Description: Microsoft Message Queuing…...
软件设计师（五）软件工程基础知识
一、软件工程概述 软件开发和维护过程中所遇到的各种问题称为“软件危机”。 软件工程是指应用计算机科学、数学及管理科学等原理，以工程化的原则和方法来解决软件问题的工程，其目的是提高软件生产率、提高软件质量、降低软件成本。 #mermaid-svg-h3j6K…...
Java中的JUnit单元测试方法的使用
Java中的JUnit单元测试方法 使用步骤如下： 选中当前工程 - 右键选择：build path - add libraries - JUnit 4 - 下一步创建Java类，进行单元测试。 此时的Java类要求：① 此类是public的 ②此类提供公共的无参的构造器此类中声明单…...
一文学透设计模式——抽象工厂模式
创建者模式 抽象工厂模式 概念 抽象工厂模式是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 这是很多地方对于抽象工厂模式的描述，说实话感觉不是特别好懂。…...
Vue3与Vue2区别和总结（1）
在2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 既然vue2已经存在了六七年之久为什么还要研发vue3呢？ 那就不得不提vue3带来的提升了 1.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次…...
【华秋推荐】物联网入门学习模块 ESP8266
随着全球信息技术的不断进步和普及，物联网成为当今备受关注的技术热点之一。通过物理和数字设备之间的连接来实现自动化和互联互通的网络。无线传感器、云计算和大数据分析等技术，物联网使设备能够相互交流和共享信息，实现智能化的自动化操作…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...