用js实现元素两个元素位置对齐
一、问题描述
使得填表单位那一行字与下面的表格左对齐,对表格使用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属性,赋值即可。
四、效果

用js实现元素两个元素位置对齐的更多相关文章
- 交换数组中两个元素的位置,元素包括key和value 一维数组
/*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...
- js改变数组的两个元素的位子,互换、置顶
//js数组的元素上移和下移动 var fieldData=[ {name:'id',value:'ID'} , {name:'username',value:'用户名'} , {name:'emai ...
- 如何在JS数组特定索引处指定位置插入元素?
如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...
- js中如何删除某个元素下面的所有子元素?(两种方法)
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- Js 更换html同一父元素下子元素的位置
//更换两个元素的位置 var exchange=function (el1, el2) { var ep1 = el1[0].parentNode, ep2 = el2[0].parentNode, ...
- JS高程12.2.3元素大小的学习笔记
<JavaScript高级程序设计>中讲述了通过JS如何控制页面中元素的大小,其中涉及到三对属性:偏移量,客户区大小,滚动大小.以前自己经常看到这三对属性,但是具体不是很清楚,容易混淆.所 ...
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
- 如何借助浏览器Console使用Js进行定位和操作元素
在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法? 其实我们都知道,Sel ...
- js数组依据下标删除元素
最近在项目中遇到了一些问题,基础性的东西记得不牢固,就总结一下放在这里备再次查找,对操作js数组的一些问题一些常用的记录! 1.创建数组 var array = new Array(); var ar ...
- js和jQuery创建元素和把元素插入到文档中所用的方法
js创建元素: document.createElement(" 创建的元素"); //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...
随机推荐
- vs code .net core Linux下离线安装Nuget包
本人第一次使用 vs code在linux下开发.net core项目,由于处于内网,无法通过在线安装,所以在遇见离线安装Nuget包时,耗费了一番功夫,网上也没有相关的,最后还是多个思路结合才解决的 ...
- python之路56 dajngo最后一天 csrf跨站请求 auth模块登录注册方法
csrf跨站请求伪造 钓鱼网站:模仿一个正规的网站 让用户在该网站上做操作 但是操作的结果会影响到用户正常的网站账户 但是其中有一些猫腻 eg:英语四六级考试需要网上先缴费 但是你会发现卡里的钱扣了但 ...
- MySQL 更新数据 不同条件(批量)更新不同值
一般在更新时会遇到以下场景:1.全部更新:2.根据条件更新字段中的某部分内容:3.根据不同的条件更新不同的值,以下是几种场景中常用的update方法. 一.方法分类 二.具体用法 (1)根据条件更新值 ...
- while2.c程序
/*while2.c程序->注意分號的位置*/ 1 #include<stdio.h> 2 int main(void) 3 { 4 int n=0; 5 6 while(n++&l ...
- Flutter 3.7 正式发布
新的 Flutter 稳定版加入了 Material 3 更新.iOS 平台优化及其他内容 新年伊始,由 Flutter 3.7 正式版来「打头阵」!我们与整个 Flutter 社区成员们继续在 Fl ...
- centos7笔记本使用iptables服务,将笔记本模拟成为出口路由器 PPPOE拨号+NAT+端口映射
郑州洪水,闲置在家,捣鼓捣鼓 centos7笔记本使用iptables服务,将笔记本模拟成为出口路由器 PPPOE拨号+NAT+端口映射 环境: 1.笔记本单网口,无法做路由网关,手里有个闲置的USB ...
- 通过pdf模板,填充内容,生成pdf文件---JAVA
1 概述 我们通常会遇到需要生成某些固定格式,但是内容不同的文件,那么我们就可以使用⽤Adobe Acrobat DC来创建pdf模块,然后通过代码对模板进行填充,生成pdf文件 2 创建一个pdf模 ...
- spring cloud12-spring cloud sleuth
1.为什么需要Spring Cloud Sleuth 微服务架构是一个分布式架构,它按业务划分服务单元,一个分布式系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性,如果出现了错误和异常,很 ...
- 数值的扩展方法以及新增数据类型BigInt
二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o或(0O)表示 0b111110111 === 503 // true; 0o767 === 503; / ...
- Python自动合并Word文件同时添加分页符的方法
本文介绍基于Python,实现对多个Word文档加以自动合并,并在每次合并时按要求增添一个分页符的方法. 现有多个Word文档文件,需将其按名称顺序合并为一个新的Word文件,且需保证每一次合 ...