向flex-box中动态添加的flex-item添加按钮
在flex-box中动态添加的flex-item添加按钮，可以通过以下步骤实现：
- 首先，确保你已经熟悉并了解flex-box布局，它是一种用于创建灵活的、响应式的布局的CSS模块。
- 动态添加flex-item的按钮可以通过JavaScript来实现。你可以使用DOM操作方法，如createElement()和appendChild()来创建并添加新的flex-item元素。
- 首先，你需要获取到flex-container的DOM元素，可以使用document.getElementById()或其他选择器方法来获取。
- 接下来，你可以创建一个新的flex-item元素，可以使用createElement()方法来创建一个新的div元素。
- 设置新创建的flex-item元素的样式，可以使用element.style来设置CSS属性，如宽度、高度、背景颜色等。
- 如果你想要在flex-item中添加按钮，可以创建一个新的按钮元素，同样使用createElement()方法来创建一个新的button元素。
- 设置按钮的样式和文本内容，可以使用element.style来设置CSS属性，如背景颜色、字体颜色、边框等，同时使用element.innerHTML来设置按钮的文本内容。
- 将按钮元素添加到flex-item中，可以使用appendChild()方法将按钮元素添加为flex-item的子元素。
- 最后，将新创建的flex-item元素添加到flex-container中，可以使用appendChild()方法将新创建的flex-item元素添加为flex-container的子元素。
下面是一个示例代码，演示了如何向flex-box中动态添加的flex-item添加按钮：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 200px;
height: 200px;
background-color: #f2f2f2;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container" id="container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
</div>
<script>
// 获取flex-container元素
var container = document.getElementById("container");
// 创建新的flex-item元素
var newItem = document.createElement("div");
newItem.className = "flex-item";
newItem.innerHTML = "Flex Item 3";
// 创建按钮元素
var button = document.createElement("button");
button.innerHTML = "Click Me";
// 设置按钮样式
button.style.backgroundColor = "blue";
button.style.color = "white";
// 将按钮添加到flex-item中
newItem.appendChild(button);
// 将新创建的flex-item元素添加到flex-container中
container.appendChild(newItem);
</script>
</body>
</html>这个示例代码中，我们首先获取了flex-container元素，然后创建了一个新的flex-item元素，并设置了其样式和内容。接着，我们创建了一个按钮元素，并设置了按钮的样式和文本内容。最后，将按钮元素添加到flex-item中，并将新创建的flex-item元素添加到flex-container中。
这样，你就可以向flex-box中动态添加的flex-item添加按钮了。根据实际需求，你可以进一步扩展和定制按钮的功能和样式。
相关·内容
2回答
我想在最初添加第一个元素后添加的最后一个项目上添加"Click me“按钮。目前"click-me“按钮出现在底部。对于第一个元素，按钮可能是这样显示的，但从后续元素来看，按钮必须位于最后添加的项上。 $('#Demosss').append($('<
浏览 21提问于2017-02-24得票数 0
回答已采纳
我希望添加的项目环绕周围，并被添加到下一行，而不是滚动到右侧。$('#clickMe').click(function() {
$('#ticketsDemosss').append($('<li class="flex-item"&g
浏览 1提问于2017-02-24得票数 0
回答已采纳
3回答
我不断地遇到这个问题，没有找到一个好的解决方案，不会引起布局问题。在列中显示按字母顺序排列的项目数组的最佳方法是什么？我使用ng-重复对数组进行迭代，并为每个项显示一个复选框。user.firstName }} </div>我最初使用的是动态</e
浏览 2提问于2016-11-08得票数 1
回答已采纳
我已经看了这个网站上的其他问题，没有一个和我的问题类似，应用flex-direction:row；没有帮助，应用各种width (min-width，max-width)也没有帮助。我是否使用了错误的单位来设置容器中项目的样式？ 我的目标是让内容包含在新的一行中。max-width: 80%; align-items: center; flex-wrap: wrap;
}
浏览 113提问于2021-07-02得票数 0
">Foo</button> <button class="flex-item">Long asstext here</button> </div></html>
按钮</em
浏览 6提问于2017-03-07得票数 13
回答已采纳
2回答
在单击按钮时增加flex项的大小
、、、、
我想添加一个特性，这样当我单击flex-item时，它必须展开到它下面完整行的大小。就像当我点击它的时候，基本上增加了它的大小，当我再次点击它的时候，又回到了以前的大小。随后的elements必须保持相同的大小，并在展开的flex-item之后移到下一行，并遵循flex-box的相同属性。$('#clickMe').click(function
浏览 0提问于2017-02-27得票数 0
回答已采纳
1回答
问题是，当我向li's添加一个边距时。当我将一个margin添加到li's中时，每行只有2个li's，并有一些额外的空间，但我需要3。所以我找到了两种解决方案给我其他的问题：
一种解决方案是向li's添加边距，比如10px。然后从每个20px的width和height中减去li's (10 * 2)。问题是，我需要lis在列和行中(就像图表)。如
浏览 0提问于2015-10-25得票数 0
回答已采纳
3回答
我正在尝试向UIStackView动态添加视图(或按钮)。谁能给我演示一下动态添加视图到UIStackView上的例子？
浏览 4提问于2018-07-24得票数 4
回答已采纳
我正在尝试创建一个最多有3列的网格。但是，如果网格中只有2个项目，我希望它们拉伸到每个项目占据50%的空间。 目前，这是有效的，但如果网格中的项目数量不是3的倍数，则剩余的项目将拉伸以占据其余空间。我希望它们都有相同的宽度。这个是可能的吗？">One</div>
<div class="flex-item">Two<&#
浏览 7提问于2020-09-25得票数 5
回答已采纳
2回答
我有一个flex容器，它包含几个将flex-grow属性设置为1和特定max-width的项。我希望向项目组中添加一个事件侦听器，但如果事件位置位于flex容器的空空间，则不希望事件触发。例如，对于一个click事件，我希望只有在单击下面图像的蓝色空间时才会触发该事件。如果我将事件侦听器添加到父容器，即使单击紫色，事件也会触发。<div id="hidden"></
浏览 4提问于2022-01-21得票数 0
1回答
我正在尝试将操作按钮添加到项目网格的末尾。问题是button元素不能影响项目的居中，但必须断开，就像它是网格的一部分一样-只是偏移。 justify-content: center; margin-right: -120px;}
在这里，使用尾随按钮上的负边距，项目正确地居中，但是按钮溢出容器，并且不能正确地中断到新行。有没有人知道这种布局<e
浏览 1提问于2019-11-07得票数 1
2回答
我有一个项目列表，其中有一些jQueryUI按钮与之关联。在执行完一项操作(删除一项)后，我想通过ajax重新加载列表。
唯一的问题是，当我这样做时，JQueryUI按钮不再显示，只显示标准标记。我知道我可以使用jQuery.live()来动态添加点击处理程序等，但是我如何对它们应用jQueryUI button()呢？
浏览 1提问于2010-06-12得票数 11
回答已采纳
1回答
向视图添加动态按钮
、、、、
我能够得到放大的身体部分，其中用户已点击。但是，正如前面提到的，文本(在图像中作为“手腕”)应该根据主体部分动态地更改，并且它应该充当按钮，这样当再次点击时，它会通过函数调用将用户带到不同的细节屏幕。如何实现此功能？欢迎使用代码片段。
浏览 2提问于2013-12-12得票数 0
1回答
没有顺序的div元素以DOM顺序显示，但是以下内容不会在DOM有序元素之间移动order: 2元素，因为元素没有指定的顺序。
浏览 2提问于2015-08-23得票数 1
回答已采纳
6回答
我有一个具有自动宽度的不同项目的列表(在我的例子中不能给出固定的宽度)。所有这些都很好，但是每当我试图在这些列表项之间添加一行时，问题就会开始出现。我没有办法确定多少px或%我必须定位这些线。有什么方法可以“动态”定位不同列表项之间的行吗？我们使用的html是不可编辑的，因为它是由我们正在使用的CMS呈现的.。
这就是我要达到的目标。
&quo
浏览 8提问于2017-01-13得票数 36
回答已采纳
嗨，我们最近开始在Aurelia中创建自定义元素。我们建立的规则之一是，在使用自定义元素时，不能将类名放在它们上。我在上读到可以使用:host选择器设置自定义元素的样式，但我找不到任何关于Aurelia的内容，我正在努力让它正常工作。
浏览 11提问于2017-02-24得票数 2
1回答
我正在写一些基本的SCSS。但是我注意到，在一堂课之前，追加只在某些情况下有效。例如，在"section“或":hover，active”这样的元素之前。例如，在下面的代码中，如果删除&，则.flex-item样式仅适用。但是看看docs/internet，它应该可以工作&在前面，不是吗？display: -webkit-flex; justify-content: cente
浏览 150提问于2018-06-03得票数 0
回答已采纳
我在chrome中遇到过这个问题，它的宽度会随内容而变化，而不是占用容器的宽度，而在Firefox上看不到。 ? 点击展开图标后，它会像这样缩小宽度，这有时会随机发生，但通常是在展开或单击展开面板的内容时发生的！任何帮助我们都将不胜感激。 ?
浏览 16提问于2019-10-10得票数 0
回答已采纳
2回答
当你运行代码片段时，我有一段代码在做它应该做的事情。我想让filterbox占整个宽度，flex-item占三分之一。 flex-item"> </div> Flex-ITEM </div> 现在，我想继续添加从数组item
浏览 34提问于2019-01-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
