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

javaScript：DOM中的CSS操作

news 2026/1/31 21:03:43

 

目录

1.style 属性获取元素写在行间的样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式 

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

代码实现

   

       在 JavaScript 中，可以通过 DOM（文档对象模型）操作来访问和修改网页上的 CSS 样式。js提供了灵活的方式来操作和修改 DOM 元素的 CSS 样式，使网页开发者可以根据需要进行样式的动态控制和改变。

1.style 属性获取元素写在行间的样式

通过 元素的 style 属性，只能获取元素写在行间的样式

通过 元素的style属性设置的样式也是行间样式

2.getComputedStyle(元素对象，null)可以获取元素的非行间样式 

getComputedStyle(元素对象，null)可以获取元素的非行间样式

该方法的第一个参数是要获取样式的元素对象，第二个参数一般写成null

他的含义是伪类或者伪元素，一旦具有第二个参数，则表示获取的是伪类或者伪元素的css样式。

在ie中，可以使用 currentStyle来获取元素的样式  例如 wp.currentStyle['width'] 

 let wp = document.querySelector('.wp')console.log(wp.style);console.log(getComputedStyle(wp,null));//获取wp对象的所有样式let obj = getComputedStyle(wp,null)console.log(obj.width,obj.height);let obj2 = getComputedStyle(wp,':hover')console.log(obj2.background);// console.log(wp.currentStyle['width']);

3.案例（定义一个div和按钮，每点击一次按钮div宽度增加）

效果预览图

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css操作</title><style>*{margin: 0;padding: 0;}.wp{width: 200px;height: 200px;border: 1px #000 solid;}.wp:hover {background: #ff0;}</style>
</head>
<body><div class="wp" ></div><button id="btn">点击++</button>
</body>
</html>
<script>let btn = document.getElementById('btn')btn.onclick = function(){let i = 5;console.log(getComputedStyle(wp).width);let w = getComputedStyle(wp).widthwp.style.width =parseInt(w)+50+'px'  //parseInt保留整数部分}
</script>

相关文章：

javaScript：DOM中的CSS操作

目录 1.style 属性获取元素写在行间的样式 2.getComputedStyle(元素对象&#xff0c;null)可以获取元素的非行间样式 3.案例&#xff08;定义一个div和按钮&#xff0c;每点击一次按钮div宽度增加&#xff09; 效果预览图 代码实现 在 JavaScript 中&#xff0c;可以通过…...

编程日记 2023/9/6 15:58:51

2023最新UI工作室官网个人主页源码/背景音乐/随机壁纸/一言

2023最新UI工作室官网个人主页源码/支持背景音乐/随机壁纸/一言 功能介绍&#xff1a; 载入动画 站点简介 Hitokoto 一言 日期及时间 实时天气 时光进度条 音乐播放器 移动端适配 打开文件&#xff1b;index.html和setting.json修改替换你的相关信息&a…...

编程日记 2023/9/6 15:57:50

常用命令之mysql命令之show命令

一、mysql show命令简介 mysql数据库中show命令是一个非常实用的命令&#xff0c;SHOW命令用于显示MySQL数据库中的信息。它可以用于显示数据库、表、列、索引和用户等各种对象的信息。我们常用的有show databases&#xff0c;show tables&#xff0c;show full processlist等&…...

编程日记 2023/9/6 15:56:49

iOS接入IJKPlayer遇到的问题汇总

这里有一个我自己编译的IJKMediaFramework&#xff0c;能解决目前Github上反馈很多常见的IJKPlayer使用问题(包含播放异常&#xff0c;UI主线程Crash等)&#xff0c;替换自己项目中的IJKMediaFramework即可链接: https://pan.baidu.com/s/1UO-YfN_1YIDOX81bgW8bag?pwdvq4u 提取…...

编程日记 2023/9/6 15:55:47

【LeetCode题目详解】第八章 贪心算法 part06 738.单调递增的数字 968.监控二叉树 （day37补）

本文章代码以c为例&#xff01; 一、力扣第738题&#xff1a;单调递增的数字 题目&#xff1a; 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数…...

编程日记 2023/9/6 15:54:46

代码随想录算法训练营Day48 | 198.打家劫舍，213.打家劫舍II，337.打家劫舍III | Day 20 复习

198.打家劫舍 文章链接 | 题目链接 | 视频链接 C解法 class Solution { public:int rob(vector<int>& nums) {vector<int> dp (nums.size(), 0);if (nums.size() 0){return 0;}if (nums.size() 1){return nums[0];}dp[0] nums[0];dp[1] max(nums[0]…...

编程日记 2023/9/6 15:53:45

Spring Boot @Validated 和Javax的@Valid配合使用

一、Validated 和Valid有什么用 Validation 和Valid 常常配合使用对传输的参数进行数据校验的注解&#xff0c;并通过配置全局异常处理器进行合理化的提示&#xff0c;增加用户的体验 并且Validated可以通过分组来指定什么时候触发什么样的参数校验&#xff08;这里看一下就行…...

编程日记 2023/9/6 15:52:44

论文复现--lightweight-human-pose-estimation-3d-demo.pytorch(单视角多人3D实时动作捕捉DEMO)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/Daniil-Osokin/lightweight-human-pose-estimation-3d-demo.pytorch 所需环境&#xff1a; Windows10&#xff0c;conda 4.13.0&#xff1b; 目录 conda环境配置安装Pytorch全家桶安装TensorRT&#xff08;…...

编程日记 2023/9/6 15:51:43

在Windows下设置将EXE开机自启动

在Windows下设置将EXE开机自启动&#xff0c;有多种方法。以下是两种常用的方法&#xff1a; 方法一&#xff1a;通过注册表 打开“运行”&#xff08;快捷键&#xff1a;Win R&#xff09;&#xff0c;输入&#xff1a;reg add HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windo…...

编程日记 2023/9/6 15:50:42

反序列化漏洞及漏洞复现

文章目录 渗透测试漏洞原理不安全的反序列化1. 序列化与反序列化1.1 引例1.2 序列化实例1.2.1 定义一个类1.2.2 创建对象1.2.3 反序列化1.2.4 对象注入 2. 漏洞何在2.1 漏洞触发 3. 反序列化漏洞攻防3.1 PHP反序列化实例3.1.1 漏洞利用脚本3.1.2 漏洞利用3.1.3 获取GetShell 3.…...

编程日记 2023/9/6 15:49:41

软件工程笔记001

2023年9月5日&#xff0c;周二上午 软件工程的目标 软件工程的目标是成功地开发一个软件&#xff1a; 较低的开发成本能按时交付软件开发出来的软件该有的功能都有开发出来的软件运行效率高开发出来的软件可靠性高开发出来的软件易于维护 软件的生存周期 概念 软件生存周期…...

编程日记 2023/9/6 15:48:40

java进行系统的限流实现--Guava RateLimiter、简单计数、滑窗计数、信号量、令牌桶

本文主要介绍了几种限流方法&#xff1a;Guava RateLimiter、简单计数、滑窗计数、信号量、令牌桶&#xff0c;漏桶算法和nginx限流等等 1、引入guava集成的工具 pom.xml 文件 <dependency><groupId>com.google.guava</groupId><artifactId>guava<…...

编程日记 2023/9/6 15:47:39

《86盒应用于家居中控》——实现智能家居的灵动掌控

近年来&#xff0c;智能家居产品受到越来越多消费者的关注&#xff0c;其便捷、舒适的生活方式让人们对未来生活充满期待。作为智能家居方案领域的方案商&#xff0c;启明智显生产设计的86盒凭借出色的性能和良好的用户体验&#xff0c;成功应用于家居中控系统&#xff0c;让家…...

编程日记 2023/9/6 15:46:38

【LeetCode】328. 奇偶链表

328. 奇偶链表&#xff08;中等&#xff09; 思路 如果链表为空&#xff0c;则直接返回链表。 对于原始链表&#xff0c;每个节点都是奇数节点或偶数节点。头节点是奇数节点&#xff0c;头节点的后一个节点是偶数节点&#xff0c;相邻节点的奇偶性不同。因此可以将奇数节点和偶…...

编程日记 2023/9/6 15:45:37

数字城市：科技革命下的未来之城

随着科技的不断进步&#xff0c;数字城市已经成为了未来城市发展的关键趋势。数字城市是指利用先进的信息技术、互联网和大数据等工具&#xff0c;将城市各个方面进行数字化、智能化、互联化的发展模式。它不仅仅是一种技术&#xff0c;更是一种对城市管理、发展和居民生活方式…...

编程日记 2023/9/6 15:44:36

Qt鼠标点击事件处理：按Escape键退出程序

创建项目 Qt 入门实战教程&#xff08;目录&#xff09; 首先&#xff0c;创建一个名称为QtKeyEscape的Qt默认的窗口程序。 参考 &#xff1a;Qt Creator 创建 Qt 默认窗口程序 Qt响应键盘Escape事件 打开Qt Creator >>编辑 >> 项目 >> Headers>> …...

编程日记 2023/9/6 15:43:31

P1162 填涂颜色

填涂颜色 - 洛谷 这个题用逆向思维&#xff0c;见不用染色的地方标记。 这里为了处理一些情况&#xff0c;将图周围一圈的0空出来&#xff0c;用于吧围墙之外的部分都标记上 用宽搜&#xff0c;四联通&#xff0c;感觉好奇怪&#xff0c;八连通ac不了 #include <iostrea…...

编程日记 2023/9/6 15:42:30

Vagrant命令

文章目录 1.介绍2.下载3. 配置3.1 配置环境变量3.2 在xshell中连接使用 4. 相关命令4.1 Box相关4.2 初始化环境4.4 虚拟机相关 1.介绍 Vagrant 是一个虚拟机管理工具 2.下载 https://www.vagrantup.com/ 3. 配置 3.1 配置环境变量 测试安装是否成功 3.2 在xshell中连接使…...

编程日记 2023/9/6 15:41:29

vue3+pinia实现动态类名及动态颜色

前提 store下models下有个before.ts文件 import { defineStore } from "pinia"; export const usebeforeloggininStore defineStore("counterStore", {state: () > ({beforelogin_params: [{type: "A登录",color: "#000",flag: 1,…...

编程日记 2023/9/6 15:40:27

CSS实现隐藏滚动条但可以滚动

场景 隐藏滚动条&#xff0c;但可以滚动 解决 全局样式 /* 隐藏滚动条 */ .outer-container::-webkit-scrollbar {width: 0; /* 设置滚动条的宽度为0 */background-color: transparent; /* 设置滚动条背景为透明 */ }/* 自定义滚动条轨道样式 */ .outer-container::-webkit…...

编程日记 2023/9/6 15:39:26

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/1/29 23:08:05

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/1/31 3:13:39

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/1/17 21:14:41

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2026/1/20 12:20:43

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2026/1/20 10:06:51

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2026/1/22 13:36:20