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

javaScript：DOM中的CSS操作

news 2025/9/5 20:49:53

 

目录

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/8/31 19:10:17

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/8/22 0:05:47

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/9/2 5:40:06

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/9/5 15:03:56

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/9/4 12:09:01

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2025/9/2 17:48:19

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31