为什么给dom设置宽度100%或者高度100%会出现无效的情况

给DOM设置宽度或高度为100%时，元素的宽度或高度会相对于其父元素计算。如果父元素没有设置具体的宽度或高度，那么子元素也就无法准确地计算自己的宽度或高度。此时，子元素的宽度或高度将默认为0，从而出现无效的情况。为了解决这个问题，可以给父元素设置具体的宽度或高度，或者使用其他的布局方式，如flex布局或网格布局。

相关问题

document.getElementsByClassName 获取的DOM元素怎么设置宽度为60%

可以使用style属性来设置元素的宽度，示例代码如下：

var elements = document.getElementsByClassName("yourClassName");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.width = "60%";
}

请将"yourClassName"替换为你需要设置宽度的元素的类名。

uniapp 操作dom进行transform横向位移100%，300ms完成位移

可以使用uni-app中的动画系统来实现横向位移。首先，需要在组件中添加一个ref属性，用于获取dom元素。然后，在mounted生命周期钩子中获取dom元素的宽度，并使用样式属性transform对元素进行横向位移。

代码示例：

<template>
  <div ref="box" class="box"></div>
</template>
<script>
export default {
  mounted() {
    const box = this.$refs.box;
    const width = box.offsetWidth;
    box.style.transition = 'transform 300ms ease-in-out';
    box.style.transform = `translateX(${width}px)`;
  }
}
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

这段代码会将box元素向右移动自身宽度的距离，动画时长为300ms，缓动函数为ease-in-out。