用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 ...
随机推荐
- 交叉编译esp8089
交叉编译esp8089 编译环境: 硬件:全志R528 ubuntu:Linux ubuntu 4.15.0-194-generic #205-Ubuntu SMP Fri Sep 16 19:49: ...
- vue中 beforeRouteLeave 生命周期函数
beforeRouteLeave需求描述在使用 element-UI的table 的时候,有这么一个需求.从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变. 需求:滚动浏览列表页,出现滚动 ...
- 创建型模式 - 抽象工厂模式AbstractFactory
学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 模式的定义与特点 抽象工厂模式.是一种为访问类提供一个创建一组相关或相关一类对象的接口,且访问类无需指定所要的产品的具体类,就能 ...
- 新版Bing 搜索后台的.NET 技术栈
微软在今天在Redmond 线下举办媒体一场活动,发布了新版的微软必应,在桌面上推出了测试版,移动版也即将推出.微软首席执行官纳德拉称Al-powered搜索为公司自云15年以来最大的事情. 2023 ...
- Spring配置类理解(Lite模式和Full模式)
Spring中的注解大家在开发中都常常用到,但是如果我说我们常常用的注解修饰了一个类,表示这个类就是一个配置类很多开发者都会有点迷糊了.具体配置类在开发中有什么样的用途我就不多说了,相信很多人都知道, ...
- bbs大作业
1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...
- 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题
解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题 需要检查的步骤: 1.是否map ...
- 原生微信小程序封装request
request文件 // 封装请求 const baseURL = 'https://api-hmugo-web.itheima.net/api/public/v1' const request = ...
- pandas连接msyql报(1115, "Unknown character set: 'utf8mb4'")错误
代码如下: 报错如下: 首先,为什么会出现这个错误: 分析如下: 随着智能手机的普及,我们开始经常使用表情符号.��更好的帮助我们进行交流.但是mysql的utf8编码只支持3字节的数据,而移动端的表 ...
- elasticsearch之使用正则表达式自定义分词逻辑
一.Pattern Analyzer简介 elasticsearch在索引和搜索之前都需要对输入的文本进行分词,elasticsearch提供的pattern analyzer使得我们可以通过正则表达 ...