style.width获取不到元素宽度

最新推荐文章于 2024-05-23 23:33:04 发布

晓猿

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量349

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44106635/article/details/125086102

版权

前言

之前做一个需求，想要通过原生js的style.width获取元素的宽度，从而动态改变元素的宽度。但发现获取不到数据，我是这样写的。

 #dd {
      width: 200px;
      height: 200px;
      background: red;
    }

<body>
  <div id="dd">
  </div>
  <button @click="add" id="add">+</button>
  <button @click="sub" id="sub">-</button>
  <script>
    var add = document.getElementById('add');
    var sub = document.getElementById('sub');
    var dd = document.getElementById('dd');
    add.onclick = function () {
      var wit = dd.style.width;
      console.log('wit', wit);//这里打印会发现打印不出东西
      var ww = parseInt(wit) + 10;
      dd.style.width = ww + "px";
    }
  </script>
</body>

解决办法

add.onclick = function () {
    var wit = dd.style.width;
    console.log('wit', wit);
    //重新设置个宽度
    dd.style.width = 200 + 'px';
    var ww = parseInt(wit) + 10;
    dd.style.width = ww + "px";
}

也可以把样式写成内联的，内部样式和外部样式是获取不到元素的宽度的。但是内联样式写太多样式不美观。

优惠劵

晓猿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style.width获取不到元素宽度

之前做一个需求，想要通过原生js的style.width获取元素的宽度，从而动态改变元素的宽度。但发现获取不到数据，我是这样写的。解决办法也可以把样式写成内联的，内部样式和外部样式是获取不到元素的宽度的。但是内联样式写太多样式不美观。
复制链接

扫一扫