如何在創建元素之前更改CSS屬性？

-3

我必須在window.onload和body.onload之前修改div的css。如何在創建元素之前更改CSS屬性？

<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       width: 100%; 
       height: 100%; 
       padding: 0px; 
       margin: 0px; 
      } 
      div { 
       margin-left: auto; 
       margin-right: auto; 
      } 
     <script> 
      HTMLDivElement.prototype.style.marginTop = (window.innerHeight/2 - HTMLDivElement.scaleHeight/2) + "px"; 
     </script> 
    </head> 

    <body> 
     <div> 
     foo<br/>bar 
     </div> 
    </body> 
</html>

來源

2012-12-28 Hard Rain

在加載之前，您無法更改DOM元素的樣式屬性。你爲什麼不使用css？ – Cerbrus

要垂直居中元素，爲什麼不使用display：table-cell和vertical-align：middle？ –

我認爲這是一個有效的問題，有些情況下用戶只能訪問更改JavaScript文件而不更改頁面的HTML或CSS文件。 – vectorfrog

我不知道，在所有瀏覽器上運行，但你可以添加一個新的style -node您head節裏是這樣的：

var marginTop = ...; 
var node = document.createElement("style"); 
node.setAttribute("rel", "stylesheet"); 
node.innerHTML = "div { margin-top: " + marginTop + "px; }"; 
document.head.appendChild(node);

你head元素必須存在明顯的這個工作。我知道這很醜，我不能推薦使用這個，但我認爲這是你想要的。

更新：我找到了另一種方式，這在我看來是更好，因爲API，你可以使用：

// insert a stylesheet if you don't have one 
if (document.styleSheets.length == 0) { 
    document.head.appendChild(document.createElement("style")); 
} 

var marginTop = ...; 
var rule = "div { margin-top: " + marginTop + "px; }"; 
document.styleSheets[0].insertRule(rule);

欲瞭解更多信息，可訪問http://www.w3.org/TR/DOM-Level-2-Style/css.html 同樣，我不知道是否所有的瀏覽器支持這一點。

來源

2012-12-28 13:18:19

負載窗口前，未啓用文件加載到DOM中。

因此，從內存.. javascript不能編輯它。

你可以隨時在onLoad之後編輯它，不應該注意太多的不同。

因此，例如jQuery中：

<script> 
(function() { 
    var divHeight = ($('div').height())/2, 
     windowHeight = window.innerHeight/2; 

    $('div').css('margin-top', windowHeight - divHeight); 
}()) 
</script>

來源

2012-12-28 13:13:37 rissicay

當然，但問題並沒有提到任何地方的jQuery。 – JJJ

我編輯了我的答案，提到jquery。考慮到這個問題不能在JavaScript中解決，一個可以解決jquery問題的隨機例子不是不合理的。 – rissicay

「JavaScript無法解決？」那麼jQuery是什麼，魔術小精靈？ – JJJ

沒有加載元素時，你將如何能夠找到它。這必須在服務器端完成。

順便說一句爲什麼你需要這種功能？

來源

2012-12-28 13:14:32 paritosh

我只想垂直居中div –

你可以在窗口加載或更好的jquery ready事件上做到這一點。 – paritosh

如果您不必考慮舊版瀏覽器，則可以通過Flexbox實現垂直對齊：http://www.html5rocks.com/en/tutorials/flexbox/quick/ –

如何在創建元素之前更改CSS屬性？

回答

相關問題