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

js-DOM03-DOM对CSS的操作

DOM对CSS的操作
    - 读取和修改内联样式
        - 使用style属性来操作元素的内联样式
        - 读取内联样式:
            语法:元素.style.样式名
            - 例子:
                元素.style.width
                元素.style.height
                - 注意:如果样式名中带有-,则需要将样式名修改为驼峰命名法
                    将-去掉,然后-后的字母改大写
                - 比如:background-color --> backgroundColor
                        border-width ---> borderWidth
                        
        - 修改内联样式:
            语法:元素.style.样式名 = 样式值
            - 通过style修改的样式都是内联样式,由于内联样式的优先级比较高,
                所以我们通过JS来修改的样式,往往会立即生效,
                但是如果样式中设置了!important,则内联样式将不会生效。
                
    - 读取元素的当前样式
        - 正常浏览器
            - 使用getComputedStyle()
            - 这个方法是window对象的方法,可以返回一个对象,这个对象中保存着当前元素生效样式
            - 参数:
                1.要获取样式的元素
                2.可以传递一个伪元素,一般传null
            - 例子:
                获取元素的宽度
                    getComputedStyle(box , null)["width"];
            - 通过该方法读取到样式都是只读的不能修改

        - IE8
            - 使用currentStyle
            - 语法:
                元素.currentStyle.样式名
            - 例子:
                box.currentStyle["width"]
            - 通过这个属性读取到的样式是只读的不能修改    - 其他的样式相关的属性
        注意:以下样式都是只读的
    
        clientHeight
            - 元素的可见高度,指元素的内容区和内边距的高度
        clientWidth
            - 元素的可见宽度,指元素的内容区和内边距的宽度
        offsetHeight
            - 整个元素的高度,包括内容区、内边距、边框
        offfsetWidth
            - 整个元素的宽度,包括内容区、内边距、边框
        offsetParent
            - 当前元素的定位父元素
            - 离他最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
        offsetLeft
        offsetTop
            - 当前元素和定位父元素之间的偏移量
            - offsetLeft水平偏移量  offsetTop垂直偏移量
        
        scrollHeight
        scrollWidth
            - 获取元素滚动区域的高度和宽度
        
        scrollTop
        scrollLeft
            - 获取元素垂直和水平滚动条滚动的距离
            
        判断滚动条是否滚动到底
            - 垂直滚动条
                scrollHeight - scrollTop = clientHeight
                
            - 水平滚动    
                scrollWidth - scrollLeft = clientWidth

相关文章:

js-DOM03-DOM对CSS的操作

DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式: 语法:元素.style.样式名 - 例子: 元素.style.width 元素.style.…...

tun驱动之tun_init

tun驱动的初始化方法是tun_init。 static int __init tun_init(void) {int ret 0;pr_info("%s, %s\n", DRV_DESCRIPTION, DRV_VERSION);ret rtnl_link_register(&tun_link_ops);if (ret) {pr_err("Cant register link_ops\n");goto err_linkops;}re…...

模拟退火算法优化bp

%% 基于模拟退火遗传算法优化BP神经网络的钢带厚度预测 clear clc close all format short %% 加载训练数据 Xtrxlsread(train_data.xlsx); DDsize(Xtr,2); input_trainXtr(:,1:DD-1);% output_trainXtr(:,DD);% %% 加载测试数据 Xtexlsread(test_data.xlsx); input_testXte(…...

【NFC音乐相册】简易制作

欢迎来到 Claffic 的博客 💞💞💞 前言: NFC音乐相册在前段时间火了一把,想必大家都听过了,最近我刷到了这个东西,闲来无事就弄了几个,这篇博客就记录下制作工序。 注:我所…...

每日一题——L1-085 试试手气(15)

L1-085 试试手气 我们知道一个骰子有 6 个面,分别刻了 1 到 6 个点。下面给你 6 个骰子的初始状态,即它们朝上一面的点数,让你一把抓起摇出另一套结果。假设你摇骰子的手段特别精妙,每次摇出的结果都满足以下两个条件:…...

FreeRTOS信号量

前面介绍过,队列(queue)可以用于传输数据:在任务之间,任务和中断之间。消息队列用于传输多个数据,但是有时候我们只需要传递一个状态,这个状态值需要用一个数值表示,比如&#xff1a…...

Leetcode.2385 感染二叉树需要的总时间

题目链接 Leetcode.2385 感染二叉树需要的总时间 Rating : 1711 题目描述 给你一棵二叉树的根节点 root,二叉树中节点的值 互不相同 。另给你一个整数 start。在第 0分钟,感染 将会从值为 start的节点开始爆发。 每分钟,如果节点…...

[蓝桥杯 2022 国 B] 卡牌(贪心/二分)

题目传送门 该题第一思路是想去模拟题目中所描述的过程 这里我选择从大到小遍历可能凑出的牌套数&#xff0c;计算凑出它需要补的牌数以及判断是否会超出能补的牌数 #include<iostream> #include<climits> #include<vector> #include<algorithm> #def…...

1301:大盗阿福

经典的dp打家劫舍问题状态设计dp[i][0]&#xff1a;在前i个店铺中选&#xff0c;且不选第i家的最大和dp[i][1]&#xff1a;在前i个店铺中选&#xff0c;且选第i家的最大和状态转移dp[i][0] max(dp[i-1][1], dp[i-1][0];第i家店不选&#xff0c;那么我们可以选第i-1个店 也可以…...

Netty——序列化的作用及自定义协议

序列化的作用及自定义协议序列化的重要性大小对比效率对比自定义协议序列化数据结构自定义编码器自定义解码器安全性验证NettyClientNettyServerNettyClientTestHandlerNettyServerTestHandler结果上一章已经说了怎么解决沾包和拆包的问题&#xff0c;但是这样离一个成熟的通信…...

一起Talk Android吧(第五百零五回:如何调整组件在约束布局中的大小)

文章目录 背景介绍调整方法各位看官们大家好,上一回中咱们说的例子是"如何调整组件在约束布局中的位置",这一回中咱们说的例子是" 如何调整组件在约束布局中的大小"。闲话休提,言归正转, 让我们一起Talk Android吧! 背景介绍 在使用约束(constraintl…...

【数据库】数据库的完整性

第五章 数据库完整性 数据库完整性 数据库的完整性是指数据的正确性和相容性 数据的正确性是指数据是符合现实世界语义&#xff0c;反映当前实际状况的数据的相容性是指数据库的同一对象在不同的关系中的数据是符合逻辑的 关系模型中有三类完整性约束&#xff1a;实体完整性…...

基因净化车间装修设计方案SICOLAB

基因净化车间的设计方案应该根据实际需求进行定制&#xff0c;以下是一些规划建设要点和洁净设计要注意的事项&#xff1a;一、净化车间规划建设要点&#xff1a;&#xff08;1&#xff09;基因车间的面积应该根据实验项目的规模进行规划&#xff0c;包括充足的操作区域和足够的…...

java 内部类的四种“写法”

基本介绍语法格式分类成员内部类静态内部类局部内部类匿名内部类&#xff08;&#x1f402;&#x1f58a;&#xff09;一、基本介绍 : 1.概述当一个类的内部又完整地嵌套了另一个类时&#xff0c;被嵌套于内部的“内核”我们称之为“内部类”(inner class)&#xff1b;而包含该…...

【python】main方法教程

嗨害大家好鸭&#xff01; 我是小熊猫~ 首先 if name "main": 可以看成是python程序的入口&#xff0c; 就像java中的main&#xff08;&#xff09;方法&#xff0c; 但不完全正确。 事实上python程序是从上而下逐行运行的&#xff0c; 在.py文件中&#xff0c; 除…...

公司对不同职级能力抽象要求的具体化

要先把当前级别要求的能力提升到精通&#xff0c;然后尝试做下一级别的事情。 但可能不确定高一级的能力要求究竟怎样&#xff0c;不同Title&#xff0c;如“工程师”“高级工程师”和“资深工程师”等。但这样 Title 对我们理解不同级别的能力要求&#xff0c;完全无用。“高…...

Java之MinIO存储桶和对象API使用

环境搭建 创建一个 maven项目&#xff0c;引入依赖&#xff1a; <!-- minio依赖--><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.3.3</version></dependency><!-- 官方 minio…...

如何用java实现同时进行多个请求,可以将它们并行执行,从而减少总共的请求时间。

1.使用线程池 通过使用Java提供的线程池&#xff0c;可以将多个请求分配到不同的线程中并行执行。可以通过创建固定数量的线程池&#xff0c;然后将请求分配给线程池来实现。线程池会自动管理线程的数量和复用&#xff0c;从而减少了线程创建和销毁的开销&#xff0c;提高了程序…...

高端装备的AC主轴头结构

加工机器人的AC主轴头和位置相关动力学特性1. 位置依赖动态特性及其复杂性2. AC主轴头2.1 常见主轴头摆角结构2.2 摆动机构3. 加装AC主轴头的作用和局限性4. 切削机器人的减速器类型5. 其他并联结构形式参考文献资料1. 位置依赖动态特性及其复杂性 However, FRF measurements …...

【Proteus仿真】【51单片机】粮仓温湿度控制系统设计

文章目录一、功能简介二、软件设计三、实验现象联系作者一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用声光报警模块、LCD1602显示模块、DHT11温湿度模块、继电器模块、加热加湿除湿风扇等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示传…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...