CSSはjavascriptで作成された要素に割り当てられていません - なぜですか？

Question

私はJavascriptによって要素を作成し、別の要素に適用し、私もこの新しい要素のスタイルとCSSファイルを持って、私は、コードを確認し、新しい要素が存在し、与えられたIDとクラス名を持っていますが、私のCSSです使用されていない。

var mainDiv=document.createElement("DIV"); 
mainDiv.id="ambiVid_controls"; 
mainDiv.className="ambiVid_controls"; 

Conts.parentNode.appendChild(mainDiv); 

とCSS：

.ambiVid_controls{ 
    position:absolute !important; 
    bottom:15px ; 
    width:60% !important; 
    height:50px !important; 
    margin-left:50% !important; 
    background-color:#333 !important; 
    z-index:1000 !important; 

} 

誰もが、これは無視されますかApplyChildとCSSを持つ任意の既知の問題がある理由を任意のアイデアを持っているコードは次のようになりますか？これが重要な場合

ブラウザは、Safariのです。

Answer 1

あなたのCSSをthusly定義された場合は、classNameプロパティを追加する必要がありません：あなたは、そのID値を持つ複数の要素を追加する場合

#ambiVid_controls 
{ 
    position:absolute !important; 
    bottom:15px ; 
    width:60% !important; 
    height:50px !important; 
    margin-left:50% !important; 
    background-color:#333 !important; 
    z-index:1000 !important;  
} 

これ、もちろん、動作しないでしょう。

編集：代わりの ：Conts.parentNode.appendChild（mainDiv）。 ...とCONTSはDIV、ちょうど行う Conts.appendChild（mainDivを）言うように、DOM内の既存の要素のIDですか。

Answer 2

たぶんdivが正しく追加されていません。それはここで働くからhttp://jsfiddle.net/XDYbN/