將多個css規則分配給javascript中的元素

以下是幾行動態創建div元素的java腳本代碼。但是我的疑問是在創建該元素之後，是否有任何捷徑分配多個css規則而不是一次又一次地鍵入（container.style）。將多個css規則分配給javascript中的元素

<script> 
    (function(){ 
     window.onload = function(){ 
      var container = document.createElement('div'); 
      container.style.width = '500px'; 
      container.style.height = '200px'; 
      container.style.backgroundColor = 'red'; 
      container.style.margin = '0 auto'; 

      document.body.appendChild(container); 
     } 
    }()); 
</script>

來源

2013-01-04 naresh kumar

爲什麼不在CSS中定義樣式？ –

研究jQuery，它有一個'.css（）'方法，您可以使用它來應用許多CSS樣式。 – Kyle

在jquery中它很容易。但有沒有JavaScript的捷徑。 –

使用CSS類和類分配給該元素：

.MyClass { 
    width: 500px; 
    height: 200px; 
    background-color: red; 
    margin: 0 auto; 
}

然後container.className = "MyClass";

來源

2013-01-04 08:03:08 SeanLi

這應該適合你@naresh – AdityaSaxena

您可以使用這樣

var container = document.createElement('div'); 
       container.setAttribute("id","div1"); 
       document.body.appendChild(container); 

$("#div1").css({"width":"500px","height":"200px","background-color":"red"});

Demo

來源

2013-01-04 08:04:45 Dineshkani

你可以使用一個for循環遍歷一個對象，應用屬性，樣式屬性一個接一個：

(function(){ 
    window.onload = function(){ 
     var container = document.createElement('div'), 
      styles = { 
       "width": "500px", 
       "height": "200px", 
       "backgroundColor": "red", 
       "margin": "0 auto" 
      }, 
      i; 
     for (i in styles) { 
      container.style[i] = styles[i]; 
     } 

     document.body.appendChild(container); 
    } 
}());

值得一提的是，這是比原來的代碼:-P更長，如果你包for在另一個函數中循環並重復使用該函數可能會有用。如果您發現自己需要重複此操作，我強烈建議包括jQuery（或ZeptoJS）並使用.css(…)來應用CSS。 jQuery對屬性應用了幾個轉換...它將屬性名稱中的連字符更改爲正確的駱駝套管，更改爲IE應用正確的屬性或屬性值等。它使編碼變得更容易，並且任何未來代碼維護者也會從中獲益。

來源

2013-01-04 08:17:45 thirdender

我認爲這種技術將起作用。讓我試試這個。 –

你可以寫你自己的css功能：

<script> 
    (function(){ 
     window.onload = function(){ 
      var container = document.createElement('div'); 
      css(container, 
       {'width': '500px', 
       'height': '200px', 
       'backgroundColor': 'red', 
       'margin': '0 auto'}); 

      document.body.appendChild(container); 
     } 

     function css(element, style){ 
      for(key in style){ 
       if(style.hasOwnProperty(key)){ 
        element.style[key] = style[key]; 
       } 
      } 
     } 
    }()); 
</script>

然後，您可以重新使用css()功能等元素。

來源

2013-01-04 08:26:04 Cerbrus

將多個css規則分配給javascript中的元素

回答

相關問題