当前位置: 首页 > 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显示传…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...