Question

我正在使用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);

我们怎么做？

Answer 1

这是一个选项：

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

但是，请注意，如果你有一些非常长的标签而且有一些非常短的标签，那么在非常宽的按钮上使用非常短的标签可能看起来很奇怪。

Answer 2

我不确切知道你要做什么，但这里有一个例子，说明如何制作宽度相同且字符长度不同的按钮：）

＆＃13;

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);
}

＆＃13;

.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;
}

＆＃13;

Answer 3

非常感谢您的想法和意见：）

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

非常感谢您的帮助：）

使用javascript动态生成按钮

3 个答案: