在呈现之前使用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设置样式

回答

相关问题