在呈現之前使用javascript設置樣式

我有一個以div顯示的圖像列表。 div的寬度會有所不同，因爲它們被指定爲其容器的百分比。其目標是獲得靈活的設計。在呈現之前使用javascript設置樣式

圖像比它們包含的div寬，但所有圖像的寬度不一樣。我想通過在圖像上設置一個負邊界來改變圖像，並以這種方式將圖像置於其容器中。

由於負邊距取決於圖像的寬度，所以我需要在設置邊距之前檢查寬度。

function marginsOfImages() { 
    var images = document.getElementsByTagName('img'); 
    for (i = 0; i < images.length; i++) { 
     var parent = images[i].parentNode; 
     var parentWidth = window.getComputedStyle(parent, null).getPropertyValue("width"); 
     /*In order to remove the "px" from the style: */ 
     var indexOfPx = parentWidth.search("px"); 
     parentWidth = parseInt(parentWidth.substring(0, indexOfPx)); 
     var imageWidth = window.getComputedStyle(images[i], null).getPropertyValue("width"); 
     indexOfPx = imageWidth.search("px"); 
     imageWidth = parseInt(imageWidth.substring(0, indexOfPx)); 
     var value = parentWidth + 90; //Want to shift the image 90px to the left 
     if (imageWidth > value) { 
      images[i].style.marginLeft = (value * (-1)).toString() + "px"; 
     } 
    } 
} 
window.onload = marginsOfImages;

的問題是，圖像是在第一無任何餘量呈現，再經過第二或所以它們將根據當JavaScript的已完成它們的寬度得到的餘量;在頁面顯然已經加載之後，圖像的外觀將會改變。

如何在顯示任何圖像之前設置正確的邊距？我需要在確定尺寸之前加載所有圖像，對不對？

在此先感謝！

來源

2012-07-16 Timothy

是有一個原因你不使用像jQuery的JavaScript庫？ – 2012-07-16 15:19:41

我本來可以使用jQuery，可能有這樣一些整潔的代碼。我只是新來的，所以認爲在這種情況下使用javascript更容易。 – Timothy 2012-07-18 10:33:47

您可以設置所有圖像有一個visibility:hidden（或可選擇地display:none）樣式，然後在你的JavaScript刪除CSS屬性（或類），使其出現保證金被應用於

來源

2012-07-16 15:19:02 Prescott

後，我與@Prescott因爲添加一個顯示圖像的類可能是要走的路。然而，更通用的方法是向html元素添加「js-loaded」類，然後您可以始終使用該元素。我也總是用「JS」或「no-JS」級的風格不同，以及：

<script> 
    var html = document.getElementsByTagName('html')[0]; 

    html.className = html.className.replace('no-js', 'js'); 

    window.onload = function() { 
     html.className += ' js-loaded'; 
    }; 
</script>

然後你可以簡單地：

<style> 
    html.js #images img {visibility: hidden} 
    html.js-loaded #images img {visibility: visible} 
</style>

來源

2012-07-16 15:33:06 powerbuoy

一個通用的js-load的想法是我之前沒有想過的（因爲我不經常這樣做），但是我將不得不將它融入到我的未來工作中。 – Prescott 2012-07-16 16:26:07

感謝您的幫助！我使用powerbuoy的想法來應用'js-loaded'類，然後使圖像可見。但是，我注意到在等待整個頁面加載時所有圖像都不可見的時候，仍然存在延遲 - 推測這是因爲該函數是在window.onload上觸發的。相反，我現在在每個img上設置邊距和'js-loaded'類，並且這將針對每個img.onload完成。這樣，每個圖像在加載後立即顯示，與其他圖像無關。風格是： 'body #images img {visibility：hidden} body #images img.js-loaded {visibility：visible}' – Timothy 2012-07-18 10:27:34

在呈現之前使用javascript設置樣式

回答

相關問題