通过单击按钮将类添加到带有JS的<div>中
通过单击按钮将类添加到带有JS的<div>中
提问于 2022-03-14 23:13:51
因此，基本而言，我试图在包含其他div的柔性盒中有一个div，并且我希望能够通过单击上面的两个按钮来改变弯曲方向。
<body>
<div>
<button class="button-1">Display Column</button>
<button class="button-2">Display Row</button>
</div>
<div class="main">
<div class="container-1">One</div>
<div class="container-2">Two</div>
<div class="container-3">Three</div>
</div>
<style>
.main{
display: flex;
}
</style>
</body>我对JS很陌生，我找不到任何有用的东西。有什么帮助吗？
回答 2
Stack Overflow用户
发布于 2022-03-14 23:23:43
- 使用
data-*为自定义属性赋值 - 使用JS的
dataset检索data-*值 - 对不属于
type="button"类型的动作元素按钮使用submit - 不要使用唯一的classNames。类应该是通用的，IDs应该是唯一的。
- 从不使用
onclick处理程序(就像其他答案中错误地指出的那样)，除非您正在内存中创建全新的元素。使用addEventListener()代替：
// DOM utility functions:
const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);
// Task:
const changeDirection = (evt) => {
const direction = evt.currentTarget.dataset.direction;
EL(".main").style.flexDirection = direction;
};
ELS("[data-direction]").forEach(EL_btn => EL_btn.addEventListener("click", changeDirection));.main {
display: flex;
}<div>
<button type="button" data-direction="column">Display Column</button>
<button type="button" data-direction="row">Display Row</button>
</div>
<div class="main">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Stack Overflow用户
发布于 2022-03-14 23:23:39
使用addEventListener()函数：
let mainDiv = document.querySelector('.main');
document.querySelector('.button-1').addEventListener('click', () => {
mainDiv.style.flexDirection = 'column';
});
document.querySelector('.button-2').addEventListener('click', () => {
mainDiv.style.flexDirection = 'row';
});.main {
display: flex;
}<div>
<button class="button-1">Display Column</button>
<button class="button-2">Display Row</button>
</div>
<div class="main">
<div class="container-1">One</div>
<div class="container-2">Two</div>
<div class="container-3">Three</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71475218
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号