使用 JavaScript 动态生成的按钮

dynamically generated buttons with javascript

本文关键字：按钮 JavaScript 动态 使用      更新时间：2023-09-26

我正在开发一个带有JavaScript，Html和CSS的电视应用程序。

我想生成标签（标题）并不总是相同的按钮：有时太长或安静短。标签应从 xml 文件动态生成。所以问题是以相同的宽度显示所有生成的按钮。

以下是我如何使用javascript创建按钮：

    var a = document.createElement("a");    
    var span2 = document.createElement("span");
    span2.setAttribute("class", "span1");
    span2.appendChild(document.createTextNode(text));
    a.appendChild(span2);

我们该怎么做？

这是一个选项：

    获取
  1. 一组按钮标签时，请获取每个字符串的长度。
  2. 根据最长字符串中的字符数确定按钮需要的宽度。
  3. 构建每个 span2 时，请为其指定一个等于最大大小的宽度属性。

但是，请注意，如果您有一些很长的标签和一些非常短的标签，那么在非常宽的按钮上放置非常短的标签可能看起来很奇怪。

我不知道你想做什么，但这里有一个例子，如何使按钮具有相同的宽度和不同的字符长度:)

var words = ['Lorem', 'Lorem ipsum', 'Lorem ipsum dolor', 'Lorem ipsum dolor sit', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet consectetur', 'Lorem ipsum dolor sit amet consectetur adipisicing', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit fuga animi'];
for (var i = 0; i < 10; i++) {
  var a = document.createElement("a");
  var span2 = document.createElement("span");
  span2.setAttribute("class", "span1");
  span2.style.width = 150 + "px";
  span2.appendChild(document.createTextNode(words[i]));
  a.appendChild(span2);
  document.body.appendChild(a);
}
.span1 {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background: lightblue;
  margin: 5px;
  vertical-align: middle;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
}

非常感谢

您的想法和评论:)

我决定制作一些缩略图，我将查询按钮标题:)至少我现在确定我会得到一个固定宽度的按钮列表。

非常感谢您的帮助:)

相关文章：