一、问题描述

使得填表单位那一行字与下面的表格左对齐,对表格使用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实现元素两个元素位置对齐的更多相关文章

  1. 交换数组中两个元素的位置,元素包括key和value 一维数组

    /*author: yangyu@sina.cndescription: 交换数组中两个元素的位置,元素包括key和value,具体用法见下面的例子*/$arr = array(11=>'a', ...

  2. js改变数组的两个元素的位子,互换、置顶

    //js数组的元素上移和下移动 var fieldData=[ {name:'id',value:'ID'} , {name:'username',value:'用户名'} , {name:'emai ...

  3. 如何在JS数组特定索引处指定位置插入元素?

    如何在JS数组特定索引处指定位置插入元素? 需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. // 原来的数组var array = ["one&q ...

  4. js中如何删除某个元素下面的所有子元素?(两种方法)

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  5. Js 更换html同一父元素下子元素的位置

    //更换两个元素的位置 var exchange=function (el1, el2) { var ep1 = el1[0].parentNode, ep2 = el2[0].parentNode, ...

  6. JS高程12.2.3元素大小的学习笔记

    <JavaScript高级程序设计>中讲述了通过JS如何控制页面中元素的大小,其中涉及到三对属性:偏移量,客户区大小,滚动大小.以前自己经常看到这三对属性,但是具体不是很清楚,容易混淆.所 ...

  7. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  8. 如何借助浏览器Console使用Js进行定位和操作元素

    在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法?     其实我们都知道,Sel ...

  9. js数组依据下标删除元素

    最近在项目中遇到了一些问题,基础性的东西记得不牢固,就总结一下放在这里备再次查找,对操作js数组的一些问题一些常用的记录! 1.创建数组 var array = new Array(); var ar ...

  10. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

随机推荐

  1. Mariadb对数据库和表的操作

    登录mariadb: 路径切换到bin下 mysql -u root -p 然后会提示输密码 新建数据库: create database demo; 其中demo为数据库名字 新建表 create ...

  2. windows安装wordcloud遇到的坑汇总

    pip install wordcloud报错,缺少visual studio包 不要偷懒,一定要从报错的地方去下载完整版本 然后安装c++ 重启后就不会报错了

  3. ionic+vue+capacitor系列笔记--手机从安卓10升级到安卓11以后,之前的代码不管用了,无法跳转其他应用

    之前手机是安卓10版本,没什么问题,升级以后,手机出现了一些异常,发现原来代码里写的跳转功能,无法使用了哦~~脑壳痛 解决方案 本项目:build.gradle targetSdkVersion 30 ...

  4. cordova第三方插件的创建,修改以及调试指南---真机调试,浏览器调试

    cordova使用以及真机调试,浏览器调试 创建插件 点击参考此文-- 超详细手把手教你cordova开发使用指南+自定义插件 插件修改注意事项--很重要 每次对自己代码目录里面任何内容进行修改后 都 ...

  5. vue打包---放到服务器下(一个服务器多个项目需要配置路径),以及哈希模式和历史模式的不同配置方法

    哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下

  6. Squirrel状态机-从原理探究到最佳实践

    作者:京东物流 郑朋辉 1 简介 Squirrel状态机是一种用来进行对象行为建模的工具,主要描述对象在它的生命周期内所经历的状态,以及如何响应来自外界的各种事件.比如订单的创建.已支付.发货.收获. ...

  7. 数据结构-详解优先队列的二叉堆(最大堆)原理、实现和应用-C和Python

    一.堆的基础 1.1 优先队列和堆 优先队列(Priority Queue):特殊的"队列",取出元素顺序是按元素优先权(关键字)大小,而非元素进入队列的先后顺序. 若采用数组或链 ...

  8. JDK8 四大核心函数式接口及扩展接口总结

    前言 Java8的四大函数式接口及相关的扩展接口在日常使用中的频率也是非常多的,包括自己定义的函数式接口,在JDK1.8之前,我们定义的方法都是用来接收参数,然后自己根据参数传递实现逻辑.在1.8之后 ...

  9. 12月14日内容总结——模板层之标签、自定义模板语法、母版(模版)的继承与导入、模型层前期准备知识点、ORM常用关键字

    目录 一.模板层之标签 分支结构if for循环 with(定义变量名) 二.自定义过滤器.标签及inclusion_tag(了解) 三.母版(模板)的继承与导入(重要) 四.模型层之前期准备 模型层 ...

  10. 10月27日内容总结——hashlib加密模块和logging、subprocess模块

    目录 一.hashlib加密模块 1.何为加密 2.为什么加密 3.如何判断数据是否以加密 4.密文的长短有什么意义 5.加密算法的基本操作 二.加密补充说明 三.subprocess模块 1.sub ...