如何將現有的CSS類樣式應用於動態創建的div？

對於這個看似多餘的問題抱歉，但其他人似乎都在問不同的情況，比如使用JQuery。我試圖動態地創建一個div &將現有的CSS樣式應用到它，但該div沒有采取風格。任何提示是非常感謝：如何將現有的CSS類樣式應用於動態創建的div？

<style> 
     div.tile { 
      position: absolute; 
      overflow: hidden; 
      background: rgba(1,1,0,1); 
      width: 400px; 
      height: 400px; 
     } 
     .a { left: 2cm; top: 2cm; z-index: 1; } 
     .b { left: 4cm; top: 4cm; z-index: 2; } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 

     createLayer(1); 

     function createLayer(layerIndex){ 
      var div = document.createElement('div'); 
      div.id = "div"+layerIndex; 
      div.class = "tile a"; 
      document.body.appendChild(div); 
      var canvas = document.createElement('canvas'); 
      canvas.id  = "layer" + layerIndex; 
      div.appendChild(canvas); 
     }

來源

2012-09-20 Jackalope

Css應用於動態添加元素 – Jashwant

也許使用cenimetres而不是像素是問題在這裏。 –

'div.className =「tile a」;' – j08691

在香草JS的屬性添加一個類的元件是不classNameclass。

試試這個：

div.className = "tile a";

來源

2012-09-20 19:24:13

感謝您的幫助！你也給了我關於我應該搜索什麼關鍵字的線索。 – Jackalope

你應該做的是檢查你的HTML功能運行，以確保該類被正確應用後。 CSS將應用於匹配元素，即使它是動態創建的 - 除非元素未被正確標記。我建議在Firefox中使用Firebug以確保你的div是正確的。

來源

2012-09-20 19:25:25

OP知道CSS類沒有被應用，這不是問題。問題是他使用了錯誤的語法。傑米得到了它。 – j08691

我明白了，但如果他檢查了JS錯誤和/或檢查了html輸出，他會看到問題:) –

在這種情況下，您的答案應該是評論而不是答案。 – j08691

如何將現有的CSS類樣式應用於動態創建的div？

回答

相關問題