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

js设置css变量控制页面一行展示指定个数的元素

news 2026/4/18 15:36:54

前置知识：
CSS变量之var()函数的应用——动态修改样式 & root的使用
flex相关知识

场景： 动态设置给父元素内子元素设置每行排列几个
在这里插入图片描述

通过 document.body.style.setProperty('--itemNum', 5)设置样式变量，然后通过给父元素设置display: flex;，子元素设置flex: 0 0 calc(90% / var(--itemNum))动态控制子元素的宽度
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.content {display: flex;flex-wrap: wrap;justify-content: flex-start;padding-bottom: 50px;padding-left: 40px;text-align: center;border:1px solid black;}.child {width: 100px;height: 100px;box-sizing: border-box;flex: 0 0 calc(90% / var(--itemNum));text-align: center;background-color: #d8ffff;border-radius: 47px;margin: 20px 0;margin-right:calc(10% / var(--itemNum));}
</style><body><div class="content"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
<script>document.body.style.setProperty('--itemNum', 5)</script>
</html>

相关文章：

js设置css变量控制页面一行展示指定个数的元素

前置知识&#xff1a; CSS变量之var()函数的应用——动态修改样式 & root的使用 flex相关知识 场景&#xff1a; 动态设置给父元素内子元素设置每行排列几个 通过 document.body.style.setProperty(--itemNum, 5)设置样式变量&#xff0c;然后通过给父元素设置display: f…...

编程日记 2023/8/13 19:45:42

4.0 Spring Boot入门

1. Spring Boot概述 Spring Boot介绍 Spring Boot是Pivotal团队在2014年推出的全新框架&#xff0c;主要用于简化Spring项目的开发过程&#xff0c;可以使用最少的配置快速创建Spring项目。 Spring Boot版本 2014年4月v1.0.0.RELEASE发布。 ​ 2.Spring Boot特性 约定优于配…...

编程日记 2023/8/13 19:44:41

[国产MCU]-BL602开发实例-I2C与总线设备地址扫描

I2C与总线设备扫描 文章目录 I2C与总线设备扫描1、I2C介绍2、I2C驱动API介绍3、I2C使用实例I2C (Inter-Intergrated Circuit)是一种串行通讯总线，使用多主从架构，用来连接低速外围装置。 每个器件都有一个唯一的地址识别，并且都可以作为一个发送器或接收器。每个连接到总线的…...

编程日记 2023/8/13 19:43:40

Python Opencv实践 - 图像平移

import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR)#图像平移 #cv.warpAffine(src, M, dsize[, dst[, flags[, borderMode[, borderValue]]]]) # M是仿射变换矩阵&#xff0c;对于平移来说M是一…...

编程日记 2023/8/13 19:42:39

易服客工作室：WordPress 6.3性能改进

随着WordPress 6.3发布&#xff0c;本文总结了该版本的性能改进。虽然WordPress 6.2显著提高了Core的加载时间性能&#xff0c;树立了很高的标准&#xff0c;但WordPress 6.3性能改进已经超越了这些结果&#xff1a;根据进行的性能基准测试&#xff0c;与WordPress 6.2相比&…...

编程日记 2023/8/13 19:41:38

LeetCode 周赛上分之旅 #39 结合中心扩展的单调栈贪心问题

⭐️ 本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架&#xff0c;你的思考越抽象&#xff0c;它能覆盖的问题域就越广&#xff0c;理解难度…...

编程日记 2023/8/13 19:40:37

山东布谷科技直播软件开发WebRTC技术：建立实时通信优质平台

在数字化的时代&#xff0c;实时通信成为了人们远程交流的主要方式&#xff0c;目前市场上也出现了很多带有实时通信交流的软件&#xff0c;实时通信符合人们现在的需求&#xff0c;所以在直播软件开发过程中&#xff0c;开发者也运用了实时通信技术为直播软件加入了实时通信的…...

编程日记 2023/8/13 19:39:36

Golang-语言源码级调试器 Delve

前言 Go 目前的调试器有如下几种&#xff1a; GDB 最早期的调试工具&#xff0c;现在用的很少。LLDB macOS 系统推荐的标准调试工具&#xff0c;单 Go 的一些专有特性支持的比较少。Delve 专门为 Go 语言打造的调试工具&#xff0c;使用最为广泛。 本篇简单说明如何使用 Del…...

编程日记 2023/8/13 19:38:34

构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)

目录 案例概述 Cadvisor InfluxDBGrafana 1.1、 Cadvisor 1.2、InfluxDB 1.3、Grafana 1.4、监控组件架构 1.5、开始部署 安装docker-ce 阿里云镜像加速器 创建自定义网络 创建influxdb容器 案例概述 Docker作为目前十分出色的容器管理技术&#xff0c;得到大量企业…...

编程日记 2023/8/13 19:37:32

【Vue3】keep-alive 缓存组件

当在 Vue.js 中使用 <keep-alive> 组件时&#xff0c;它将会缓存动态组件&#xff0c;而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 <keep-alive> 只能包含&#xff08;或者说只能渲染&#xff09;一个子组件…...

编程日记 2023/8/13 19:36:28

24成都信息工程大学809软件工程考研

1.渐增式与非渐增式各有何优、缺点&#xff1f;为什么通常采用渐增式&#xff1f; 非渐增式是将所有的模块一次连接起来&#xff0c;简单、易行、节省机时&#xff0c;但测试过程难于排错&#xff0c;发现错误也很难定位&#xff0c;测试效率低&#xff1b;渐增式是将模块一个…...

编程日记 2023/8/13 19:35:26

Filament for Android 编译搭建(基于Ubuntu20.04系统)

一、Filament 源代码下载 github下载地址&#xff1a; 2、安装clang 我是直接安装clang-10 Ubuntu 20.04 &#xff0c;sudo apt install clang 命令默认就是clang-10 $sudo apt-get install clang-10 # 安装 AST.h 等头文件 $sudo apt-get install libclang-10-dev $sudo …...

编程日记 2023/8/13 19:34:26

【MySQL---＞数据库操作】

文章目录 [TOC](文章目录) 一、操作语句1.增2.删3.改4.查5.备份 二、字符集与校验规则 一、操作语句 1.增 语句格式:create database [if no exists]数据库名[create_specification [,create_specification] …]; 中括号内是可选项,if no exists是指如果数据库不存在就创建,存…...

编程日记 2023/8/13 19:33:24

PhotoShop2023 Beta AI版安装教程

从 Photoshop 开始&#xff0c;惊艳随之而来​ 从社交媒体贴子到修饰相片&#xff0c;设计横幅到精美网站&#xff0c;日常影像编辑到重新创造 – 无论什么创作&#xff0c;Photoshop 都可以让它变得更好。​ Photoshop2023 Beta版本安装教程和软件下载 地址&#xff1a;点击…...

编程日记 2023/8/13 19:32:22

并发冲突导致流量放大的线上问题解决

事故现象 生产环境&#xff0c;转账相关请求失败量暴增。 直接原因 现网多个重试请求同时到达 svr&#xff0c;导致内存数据库大量返回时间戳冲突。业务方收到时间戳冲突&#xff0c;自动进行业务重试&#xff0c;服务内部也存在重试&#xff0c;导致流量放大。 转账 首先…...

编程日记 2023/8/13 19:31:21

Spring Cloud Gateway过滤器GlobalFilter详解

一、过滤器的场景 在springCloud架构中&#xff0c;网关是必不可少的组件&#xff0c;它用于服务路由的转发。对客户端进行屏蔽微服务的具体细节&#xff0c;客户端只需要和网关进行交互。所以网关顾名思义&#xff0c;就是网络的一个关卡。它就是一座城的城门守卫。所以这个守…...

编程日记 2023/8/13 19:30:20

【LeetCode】1281.整数的各位积和之差

题目 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1&#xff1a; 输入&#xff1a;n 234 输出&#xff1a;15 解释&#xff1a; 各位数之积 2 * 3 * 4 24 各位数之和 2 3 4 9 结果 24 - 9 15示例 2&…...

编程日记 2023/8/13 19:29:19

22、springboot的Profile（通过yml配置文件配置 profile，快速切换项目的开发环境）

springboot的Profile ★ 何谓Profile 应用所在的运行环境发生切换时&#xff0c;配置文件常常就需要随之修改。Profile&#xff1a;——就是一组配置文件及组件的集合。可以整个应用在不同的profile之间切换&#xff08;设置活动profile&#xff09;&#xff0c;整个应用都将使…...

编程日记 2023/8/13 19:28:15

2023-08-12力扣每日一题-暴力hard

链接&#xff1a; 23. 合并 K 个升序链表 题意&#xff1a; 如题 解&#xff1a; 时间668ms击败 5.00%使用 C 的用户/内存12.37mb击败 87.96%使用 C 的用户 循环选择插入新链表的节点&#xff0c;纯正的暴力&#xff0c;不过空间用得少 最坏应该是1E4*1E4&#xff0c;没…...

编程日记 2023/8/13 19:27:14

Mac安装nvm教程及使用

nvm 是 node 版本管理器&#xff0c;也就是说一个 nvm 可以管理多个 node 版本&#xff08;包含 npm 与 npx&#xff09;&#xff0c;可以方便快捷的安装、切换 不同版本的 node。 1、直接通过brew安装 执行命令&#xff1a;brew install nvm PS&#xff1a; 如果没有安装br…...

编程日记 2023/8/13 19:26:13

别再手动点STK了！用MATLAB的ExecuteCommand批量生成AER和可见性报告（附完整代码）

用MATLAB自动化STK报告生成&#xff1a;从单次操作到批量处理的进阶指南 每次在STK软件里重复点击生成报告的操作&#xff0c;是不是已经让你感到疲惫不堪&#xff1f;想象一下&#xff0c;当你需要为20颗卫星和15个地面站生成数百份AER和可见性报告时&#xff0c;手动操作不仅…...

编程新知 2026/4/18 14:35:19

3步解锁B站缓存视频：m4s转MP4完整指南

3步解锁B站缓存视频&#xff1a;m4s转MP4完整指南 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 还在为B站缓存的视频只能在特定客户端播放而烦…...

编程新知 2026/4/18 12:34:31

从单目到双目：利用aruco_ros和USB相机实现低成本机器人室内定位全流程

从单目到双目&#xff1a;低成本机器人室内定位系统实战指南 去年在为一个仓储AGV项目做POC验证时&#xff0c;客户提出了一个看似矛盾的需求&#xff1a;既要实现厘米级定位精度&#xff0c;又要求硬件成本控制在千元以内。面对这个挑战&#xff0c;我们最终选择了ArUco二维码…...

编程新知 2026/4/18 12:32:31

Fish Speech 1.5中英混合语音合成教程：电商商品描述自动配音实战

Fish Speech 1.5中英混合语音合成教程&#xff1a;电商商品描述自动配音实战 1. 引言&#xff1a;电商卖家的配音烦恼与AI解决方案 如果你是电商卖家&#xff0c;每天要处理几十上百个商品上架&#xff0c;最头疼的是什么&#xff1f;除了拍照修图&#xff0c;可能就是给商品…...

编程新知 2026/4/18 12:22:24

16 - Go 协程（goroutine）：从基础到实战

文章目录&#x1f680; 16 - Go 协程&#xff08;goroutine&#xff09;&#xff1a;从基础到实战什么是 goroutine&#xff1f;&#x1f680; 第一个 goroutinegoroutine 执行机制&#x1f525; 关键模型&#xff1a;GMP 模型&#x1f9e0; 调度流程&#xff08;简化版&#x…...

编程新知 2026/4/18 11:58:56

如何用三层解码技术构建200+小说网站的通用下载器：从零到一的完整实现指南

如何用三层解码技术构建200小说网站的通用下载器&#xff1a;从零到一的完整实现指南 【免费下载链接】novel-downloader 一个可扩展的通用型小说下载器。 项目地址: https://gitcode.com/gh_mirrors/no/novel-downloader 在数字内容保护日益严格的今天&#xff0c;小说…...

编程新知 2026/4/18 11:42:47

避坑指南：K230部署YOLOv8时，nncase版本、Python环境与系统匹配的那些坑

K230部署YOLOv8避坑实战&#xff1a;从版本冲突到环境变量的深度排错手册 当你在K230开发板上部署YOLOv8目标检测模型时&#xff0c;是否遇到过这些令人抓狂的报错&#xff1f;"nncase版本不匹配"、"Python环境冲突"、"找不到.NET运行时"... 这些…...

编程新知 2026/4/18 11:14:16

ESP8266-01S联网避坑大全：关于STA模式、TCP连接和透传的那些“反直觉”设定

ESP8266-01S联网避坑大全&#xff1a;关于STA模式、TCP连接和透传的那些“反直觉”设定 当你第一次拿到ESP8266-01S这个小小的Wi-Fi模块时&#xff0c;可能会被它强大的功能所吸引。但很快&#xff0c;你就会发现这个看似简单的模块背后隐藏着许多让人困惑的"反直觉"…...

编程新知 2026/4/18 10:59:56

从手机到Wi-Fi：拆解你身边那些‘看不见’的射频滤波器（SAW/BAW/陶瓷）

从手机到Wi-Fi&#xff1a;拆解你身边那些‘看不见’的射频滤波器&#xff08;SAW/BAW/陶瓷&#xff09; 当你用手机刷视频、连Wi-Fi打游戏时&#xff0c;有没有想过这些无线信号是如何在复杂的电磁环境中保持稳定的&#xff1f;答案就藏在那些米粒大小的射频滤波器里。这些不起…...

编程新知 2026/4/18 9:19:54

AssetRipper终极指南：从游戏资源中提取宝藏的完整实战教程

AssetRipper终极指南&#xff1a;从游戏资源中提取宝藏的完整实战教程 【免费下载链接】AssetRipper GUI Application to work with engine assets, asset bundles, and serialized files 项目地址: https://gitcode.com/GitHub_Trending/as/AssetRipper 你是否曾经玩过…...

编程新知 2026/4/18 9:17:41