用js实现元素两个元素位置对齐
2024-09-08 19:14:29
一、问题描述
使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效;并且2021年下面对应的月份是动态变化的,月份的个数不定;
二、解决方案
(1)把那行字放在表格里,再把这行表格的边框去掉;
(2)固定表格的宽度;2021年的列固定宽度,下面对应的月份的宽度按均分配;
(3)使用原生js前端操作dom,计算出外边距;
三、实现
1 mounted() {
2 const tag=document.getElementsByClassName("tg")[0]
3 let margin_value=window.getComputedStyle(tag,null).marginLeft
4 console.log(tag)
5 console.log(window.getComputedStyle(tag,null).marginLeft)
6 const value=document.getElementsByClassName("custom-title")[0]
7 console.log(value)
8 value.setAttribute("style","margin-left:"+margin_value)
9 },
解释:“tg”为表格的类名,获取表格的外边距的值;“custom-title”为那一行字所在元素的类名;给那行字的标签添加style属性,赋值即可。
四、效果
最新文章
- Java关于流知识总结
- Python中的运算符
- httpclient 支持代理和http &; https
- mybatis sql注入安全
- 起底多线程同步锁(iOS)
- java连接mysql数据库(jsp显示和控制台显示)
- HDU 4611 Balls Rearrangement (数学-思维逻辑题)
- 「LINUX资料」简单实用命令less和vi(三)
- 浅谈JS中的浅拷贝与深拷贝
- IntelliJ IDEA安装配置
- 基于N-Gram判断句子是否通顺
- MySQL跟踪SQL执行之开启慢查询日志
- PID控制器开发笔记之九:基于前馈补偿的PID控制器的实现
- a标签点击不跳转的几种方法
- linux下如何批量杀JAVA进程或某个进程方法
- 逃离迷宫 HDU1728 (bfs)
- java过滤emoji表情(成功率高)
- Java基础四(switch、数组、)
- linux 添加本地yum源
- rpx
热门文章
- 消息队列(Message Query)的初学习
- P5934 [清华集训2012]最小生成树
- cordova完整版本创建、修改自定义插件重新调试步骤带截图
- 字节输出流OutputStream类-字节输出流写入数据到文件
- C#依赖注入(直白明了)讲解 一看就会系列
- C# SMTP发邮件不支持465端口的解决方案
- qt元对象系统之 Q_PROPERTY宏
- javaEE(Stream流、日志、IO流、File)
- 【源码】RapidJSON 源码剖析(0):关于 RapidJSON
- CTF之WEB学习路线规划