element 修改textarea的高度 但是有多个 不能影响其他的
时间: 2024-09-13 21:12:06 浏览: 11
当你想要通过JavaScript或CSS修改HTML文本区域(textarea)的高度,但又希望对每个textarea保持独立,避免相互影响,你需要采用特定的方法来操作:
1. **直接设置高度**:针对每个textarea,你可以单独为其应用样式,例如:
```css
textarea#textarea1 {
height: 100px;
}
textarea#textarea2 {
height: 200px;
}
```
在这里,`#textarea1` 和 `#textarea2` 分别代表两个textarea元素的ID,它们各自有不同的高度设置。
2. **动态调整**:如果你希望根据内容自适应高度,可以监听`resize`事件,并更新对应的高度:
```javascript
var textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px'; // 使得高度等于内容的实际高度
});
```
这会让textarea随着用户输入内容自动调整到合适的高度。
3. **CSS Flexbox或Grid**:如果你的布局允许,可以使用Flexbox或Grid来管理textarea的位置和高度,这样每个元素会独立占据空间:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.textarea-item {
flex: 1;
min-height: 60px;
}
```
然后给每个`.textarea-item`应用这个样式。
总之,为每个textarea设置独立的样式属性或使用适当的布局技术,可以确保它们之间互不影响,各自拥有独立的高度。