0

我使用以下代码（Javascript）将元素动态加载到“移动网页”中。它工作正常，但我无法为那些新添加的元素设置 CSS 样式（如高度、宽度......）。

此处通过此代码按钮已完美加载。在这种情况下，我无法使用 css 元素改变动态加载按钮的大小。

<head>
<script type="text/javascript">
var arrayToModify = [];
window.onload = function () {
var i, MyArray, ButtonContainer, NewButton;
MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
ButtonContainer = document.getElementById("Button_holder");
for (i = 0; i < MyArray.length; i++) {
NewButton = document.createElement('input');
NewButton.type = 'button';
NewButton.value = MyArray[i];
NewButton.id = MyArray[i];;
NewButton.onclick = function () {
alert('You Clicked '+this.id);
arrayToModify[arrayToModify.length] = this.id;
};
ButtonContainer.appendChild(NewButton);
}
};
</script>
<style>
NewButton
{
width:100%;
height:120px;
background-color:red;
}
ButtonContainer
{
width:100%;
height:120px;
background-color:yellow;
}
.divclass
{
height:400px;
background-color:lightblue;
}
</style>
</head>
<body>
<div id="Button_holder" class="divclass">
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />
</body>
</html>
4

4 回答 4

1

你的 CSS 是错误的。CSS 不查看 JS 变量名。因此，您的 CSS 选择器正在寻找那些 HTML 标记（即 HTML 标记<NewButton>，它显然不存在）。

相反，尝试为每个新的输入和按钮容器添加一个类，然后在 CSS 选择器前面加上一个.（这是一个类选择器）。

这是一个例子：jsFiddle Demo

HTML：

<div id="Button_holder" class="divclass ButtonContainer"> <!-- added a class name here -->
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />

CSS：

.NewButton
{
    width:100%;
    height:120px;
    background-color:red;
}
.ButtonContainer
{
    width:100%;
    height:120px;
    background-color:yellow;
}
.divclass
{
    height:400px;
    background-color:lightblue;
}

JS：

var arrayToModify = [];
window.onload = function () {
    var i, MyArray, ButtonContainer, NewButton;
    MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
    ButtonContainer = document.getElementById("Button_holder");
    for (i = 0; i < MyArray.length; i++) {
        NewButton = document.createElement('input');
        NewButton.type = 'button';
        NewButton.value = MyArray[i];
        NewButton.id = MyArray[i];
        NewButton.className = 'NewButton'; // added a class name here
        NewButton.onclick = function () {
            alert('You Clicked '+this.id);
            arrayToModify[arrayToModify.length] = this.id;
        };
        ButtonContainer.appendChild(NewButton);
    }
};

而且，正如@SurrealDreams 所说，将 CSS 保存在外部文件中以使其更易于维护和重用是一个好主意。假设您有多个具有完全相同样式的页面？不必每次都重写这些样式，只需将它们放在外部 .css 文件中，然后将该文件包含在您<head>使用的类似.css 文件中<link rel="stylesheet" type="text/css" href="path/to/your/css/file.css" />。

我真的建议您阅读 CSS 教程。对于这个特定的问题，本节应该证明是有用的。

于 2013-07-01T15:14:58.387 回答
0

您的方法是将 CSS 样式分配给 JavaScript 变量/对象的名称。两者之间没有直接联系——CSS 正在寻找带有名为 ButtonContainer 和 NewButton 的标签的 HTML 元素。CSS 不是“智能的”——它不会将 JavaScript 生成的 HTML 映射到样式。它正在寻找一个简单的匹配，因此您需要设计代码使其具有匹配。

要按要求回答您的问题，您可以包含这样的一行...

NewButton.style = "width: 20px; height: 40px; border: 1px solid #000;";

这将为每个生成的 NewButton 元素设置样式。使用 CSS 类会给你一个更好的整体结果。

请注意 - 有更好的方法。

一般来说，最好的方法是使用类和 id 作为代码的一部分来创建代码。在您的通用 CSS 文件中包含 CSS 规则以设置这些元素的样式。

虽然您可以为生成的代码添加样式，但最好将所有样式保存在 CSS 文件中。以这种方式维护要容易得多。这一切都在一个地方，一个错字不会破坏你的脚本。CSS 对错误的容忍度要高得多。最好避免使用内联样式，就像最好避免在 HTML 元素中编写 JavaScript 一样。

于 2013-07-01T15:13:26.277 回答
0

在 Javascript 中，您可以像这样添加 css 类：

例如：

document.getElementById("your-ID").setAttribute("class", "your-className");

像这样试试。

编辑：正如 Travesty3提到的，您缺少 add 。用于 css 中的类选择器。纠正错误后，您可以使用上述方法添加类。

ButtonContainer.setAttribute("class", "ButtonContainer");
NewButton.setAttribute("class", "NewButton");

在 JS 代码的最后添加上面两行。检查这个更新的 JSFiddle在这个我已经减少了删除按钮的高度和宽度以显示差异。

于 2013-07-01T15:15:13.737 回答
0

css 中的 NewButton 和 ButtonContainer 是什么？它看起来写成标签。如果你需要这些作为类，你应该设置 . 在每个之前，例如 .NewButton。

更新代码：

<head>
<script type="text/javascript">
var arrayToModify = [];
window.onload = function () {
var i, MyArray, ButtonContainer, NewButton;
MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
ButtonContainer = document.getElementById("Button_holder");
for (i = 0; i < MyArray.length; i++) {
NewButton = document.createElement('input');
NewButton.type = 'button';
NewButton.value = MyArray[i];
NewButton.className = 'NewButton';
NewButton.id = MyArray[i];;
NewButton.onclick = function () {
alert('You Clicked '+this.id);
arrayToModify[arrayToModify.length] = this.id;
};
ButtonContainer.appendChild(NewButton);
}
};
</script>
<style>
.NewButton
{
width:100%;
height:120px;
background-color:red;
}
.ButtonContainer
{
width:100%;
height:120px;
background-color:yellow;
}
.divclass
{
height:auto;
background-color:lightblue;
}
</style>
</head>
<body>
<div id="Button_holder" class="divclass">
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />
</body>
</html>
于 2013-07-01T15:16:42.433 回答