Skip to content
小飞侠
  • 首页
  • 小程序
  • uniapp
  • vue
  • APICloud
  • 其他
菜单

博客

  1. 首页>
  2. 其他>
  3. 动态修改宽度

动态修改宽度

  • Post author:xfxia
  • Post published:2023年9月7日
  • Post category:其他


1、获取类名,取到宽度

created() {
    this.$nextTick(()=>{
      this.shortcut = document.getElementsByClassName("mainCont")[0].offsetWidth + 
      document.getElementsByClassName("mainCont")[0].offsetLeft;
    })
}

2、在data里定义

data() {
    return {
      shortcut:'',
   }
}

3、添加动态样式绑定

:style="{'width':shortcut + 'px'}"



版权声明:本文为x_nweBorder01k原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/x_nweBorder01k/article/details/122689510

你可能也喜欢

mybatis与spring集成和spring整合mybatis分页插件

Tab页切换时页面自动刷新效果

【bug记录】lombok下使用redis导致字段不一致问题

大型网站技术架构(2):架构要素和高性能架构【转】

windows10如何搭建DVWA靶场

Kubernetes——Job与CronJob

使用Markdown语法写矩阵

深入浅出Docker镜像和容器概念

ubuntu20.04安装企业微信

Mybatis配置文件深入:核心配置文件和映射配置文件

KVM- vnc配置

项目竞标词汇

HTML的img插入本地图片

Spring Boot程序使用代理

如何从实验转向构建生产机器学习应用程序

centos安装Jenkins并部署SpringBoot应用

启动Tomcat服务器报错: Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are alr

Hadoop框架简述

网络基础3-IP地址

Redisson分布式锁

目录

  • APICloud (3)
  • golang (228)
  • java (8,236)
  • linux (4,002)
  • mysql (2,800)
  • php (1,070)
  • python (5,439)
  • solidity (25)
  • uniapp (235)
  • vue (2,463)
  • 其他 (88,233)
  • 小程序 (801)

文章归档

  • 2023年十二月 (1872)
  • 2023年十一月 (477)
  • 2023年十月 (17371)
  • 2023年九月 (44974)
  • 2023年八月 (26399)
  • 2023年七月 (14793)
  • 2023年六月 (1)
  • 2023年五月 (2186)
  • 2023年四月 (3838)
  • 2023年三月 (1544)
  • 2023年二月 (3)
  • 2023年一月 (4)
  • 2022年十二月 (3)
  • 2022年十一月 (36)
  • 2022年十月 (16)
  • 2022年九月 (8)
  • 2021年九月 (1)
  • 2020年九月 (6)
  • 2020年八月 (5)

标签

Aave (1) cosmos (6) defi (255) flag (27) gitee (1) github (1) golang (234) java (8234) linux命令 (82) List (1) map (1115) mysql (3093) npm (237) tendermint (6) uuid (43) vant (64) vmware (270) 区块链 (63) 合约 (37) 小程序版本更新 (3)
  • 首页
  • 小程序
  • uniapp
  • vue
  • APICloud
  • 其他
Copyright xfxia.com 鲁ICP备19024253号-2
关闭菜单