专栏首页前端小叙js动态设置padding-top遇到的坑

js动态设置padding-top遇到的坑

我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的:

// setAttribute设置padding-top并且转换为百分比
imageBox.setAttribute('padding-top',`${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)*100}%`);
//setAttribute设置padding-top使用percentage
imageBox.setAttribute('padding-top',`percentage(${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)})`);
// style属性直接设置 使用percentage
imageBox.style.paddingTop = `percentage${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)}`;

成功实现的方式:

imageBox.style.paddingTop = `${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)*100}%`;
percentage这个百分比用法在css中是起作用的,在js中还是设置css样式的时候还是尽量少用,会出现设置不成功的问题,还是需要转换成百分比。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给...

    蓓蕾心晴
  • 不确定行数的多行文本垂直水平居中的css

    ul li { position:relative; display: table; w...

    蓓蕾心晴
  • Vue.js 2.0 学习重点记录

    Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 V...

    蓓蕾心晴
  • android这些UI库,再不看你就OUT了

    项目地址: https://github.com/luxiaoming/awesome-android-ui 本文推荐一些常用的UI库,...

    用户1263308
  • 技术无罪?AI 脱衣 App 已经被下线了!

    2019 年 6 月 27 日,The Verge 报道网上又出现一个奇葩的新 AI 工具,叫 DeepNude。

    闫小林
  • 说唱有嘻哈 算法有哈希

    讲完了List之后,我们继续讲集合中的另外两大巨头,Map和Set。在讲解这两个巨头之前,很有必要来了解一下哈希算法,因为Map和Set的无脑实现类就是Hash...

    用户5745563
  • Kubernetes 1.9发布:Apps Workloads通用版本与生态系统扩展

    我们很高兴在今年之内进行第四次——也是最后一次版本更新公告,即Kubernetes 1.9的诞生!

    Debian社区
  • 单选按钮的取消与选中 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 数据分析企业单位对应届生的简历筛选——以招商证券为例

    随着秋风习习而至,又到了各位应届生秣马厉兵霍霍猪羊的时节,不过这次待割的不是羊毛,收获的也不是果实,而是众位心甘情愿嗷嗷待宰的即将出圈的应届生求职大军们。尚未杀...

    华章科技
  • 如何分析 WindowsDump:Dump 起源与初始设置(一)

    Microsoft 推出 Dump 机制在宕机时先进行蓝屏收集宕机前状态,并且可以捕获到导致异常的关键错误,当 Windows 出现异常 Crash 时 Win...

    李斯达

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动