将css样式添加到动态添加的<表单>java脚本中的元素

adding css styles to dynamically added <form> elements in java script

本文关键字：添加 java gt 脚本 元素 表单 css 动态 样式 lt      更新时间：2023-09-26

我使用以下代码（Javascript）将元素动态加载到"Mobile网页"中。它工作得很好，但我不能为那些新添加的元素设置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>

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

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

我真的建议你复习一下CSS教程。对于这个特定的问题，本节应该是有用的。

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>

您的方法是将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一样。

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

例如：

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

试试这个。

编辑：如Travesty3所述，您错过了添加。用于css中的类选择器。一旦您纠正了错误，您就可以使用上面的方法来添加类。

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

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

相关文章：