javascriptによるIE/Firefoxスタイルの更新が機能しない

Question

私はオートコンプリートから名前を取得し、その中にボタン付きのラベルを動的に作成するjavascript関数に送るプログラムを持っています。スタイルプロパティを設定するためにDOMメソッドを使用しようとすると、Firefox/IE 7では機能しませんが、IE 8/Chromeでは機能しません。 はここ

function fnCreate(client) { 
        var newLbl = document.createElement("label"); 
        var newBtn = document.createElement("input"); 
        var hidden = document.getElementById("count"); 
        var val = parseInt(hidden.value) + 1; 
        hidden.setAttribute("value", val); 
        newLbl.setAttribute("id", "lbl" + client + val); 
        newBtn.setAttribute("id", "btn" + client + val); 
        newBtn.setAttribute("type", "button"); 
        newBtn.setAttribute("style", "background-color: #6D84B4; background-image: url('X.png'); vertical-align: middle; background-repeat: no-repeat; text-align: center; height: 14px;border-style: none; border-width: 0px; "); 
        newLbl.innerHTML = client; 
        newLbl.setAttribute("style", "background-color: #6084B4; color: #FFFFFF"); 
        newBtn.setAttribute("onclick", "fnDelete('" + client + val + "')"); 
        newLbl.appendChild(newBtn); 
        myData.appendChild(newLbl); 

入力パラメータ「クライアント」は名前で、機能です。ラベルにボタンを追加し、ラベルをmyDataに追加する必要があります。myDataはテーブルのdiv内にあります。ページが読み込ま

Answer 1

私の意見では、実際にメンテナンス性を向上させる2つのクラスを作成するのが最も良い解決策です。あなたはあなたのJavaScriptでは

このような

.button1 { 
    background-color: #6D84B4; 
    background-image: url('X.png'); 
    vertical-align: middle; 
    background-repeat: no-repeat; 
    text-align: center; 
    height: 14px; 
    border: 0; 
} 

.label1 { 
    background-color: #6084B4; 
    color: #FFFFFF; 
} 

何かを探しているCSSクラスを持っていると思いますが、今読んで維持する方がはるかに簡単なもの

このような

newBtn.className = 'button1'; 
newLbl.className = 'label1'; 

にしてください。

完全なコードは、以下の

function fnCreate(client) { 
    var newLbl = document.createElement('label'); 
    var newBtn = document.createElement('input'); 
    var hidden = document.getElementById('count'); 

    var val = parseInt(hidden.value) + 1; 

    hidden.value = val; 
    newLbl.id = 'lbl' + client + val; 
    newBtn.id = 'btn' + client + val; 
    newBtn.type = 'button'; 
    newBtn.className = 'button1'; 
    newBtn.onclick = fnDelete(client + val); 
    newLbl.innerHTML = client; 
    newLbl.className = 'label1' 

    newLbl.appendChild(newBtn); 
    myData.appendChild(newLbl); 
} 

Answer 2

後

<label id="lblDimitris1" style=""> 

これはIE8のためのマークアップでは、これを試してみてください：

function fnCreate(client) { 
    var newLbl = document.createElement('label'); 
    var newBtn = document.createElement('input'); 
    var hidden = document.getElementById('count'); 

    var val = parseInt(hidden.value) + 1; 

    hidden.style.value = val; 
    newLbl.style.id = 'lbl' + client + val; 
    newBtn.style.id = 'btn' + client + val; 
    newBtn.type = 'button'; 
    newBtn.style.backgroundColor = '#6D84B4'; 
    newBtn.style.backgroundImage = 'url(X.png)'; 
    newBtn.style.backgroundRepeat = 'no-repeat'; 
    newBtn.style.verticalAlign = 'middle'; 
    newBtn.style.textAlign = 'center'; 
    newBtn.style.height = '14px'; 
    newBtn.style.border: '0px'; 
    newBtn.onclick = fnDelete(client + val); 
    newLbl.innerHTML = client; 
    newLbl.style.backgroundColor = '#6084Bd'; 
    newLbl.style.color = '#FFFFFF'; 

    newLbl.appendChild(newBtn); 
    myData.appendChild(newLbl); 

}

setAttributeメソッドは、クロスブラウザに対応していません。私が100％確信していないことがいくつかあります。クライアント変数またはval変数のいずれかが数値として型キャストされている場合、onclick fnDelete（）関数のパラメータ連結が機能しますが、これはあなたによって異なります。このような要素の型を設定できるかどうかは確かではありませんが、上記のコードが特定のブラウザで動作していた場合、これも同様です。