0

次のコード (Javascript) を使用して、要素を「モバイル Web ページ」に動的にロードしました。正常に動作しますが、新しく追加された要素に 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

0

あなたのアプローチは、CSS スタイルを JavaScript 変数/オブジェクトの名前に割り当てることでした。2 つの間に直接的な関係はありません。CSS は、ButtonContainer および NewButton という名前のタグを持つ HTML 要素を探します。CSS は「スマート」ではありません。JavaScript によって生成された HTML をスタイルにマップするつもりはありません。単純な一致を探しているため、一致するようにコードを設計する必要があります。

質問に答えるには、次のような行を含めることができます...

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

これにより、生成された各 NewButton 要素にスタイルが設定されます。CSS クラスを使用すると、全体的な結果が向上します。

注意してください - より良いアプローチがあります。

一般に、コードの一部としてクラスと ID を使用してコードを作成するのが最善の方法です。一般的な CSS ファイルに CSS ルールを含めて、それらの要素のスタイルを設定します。

生成されたコードにスタイルを追加できますが、すべてのスタイルを CSS ファイルに保持することをお勧めします。そのように維持する方がはるかに簡単です。すべてが 1 か所にあり、タイプミスによってスクリプトが壊れることはありません。CSS はエラーに対してはるかに寛容です。JavaScript を HTML 要素内に記述しないのが最善であるように、インライン スタイルも避けるのが最善です。

于 2013-07-01T15:13:26.277 に答える
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 に答える