我怎样才能随机化 HTML 元素的颜色属性

How could I randomize the color attribute for an HTML element?

本文关键字：元素 颜色 属性 HTML 随机化      更新时间：2023-09-26

我有一个列出的元素网格，我的目的是随机化它们的加载背景颜色。到目前为止，所有元素都具有相同的背景（thumbnailBackgroundColor），这在HTML文件中是这样设置的： 

<head>
<script type="text/javascript" src="java/FWDIGP.js"></script>    
<script type="text/javascript">    
    FWDRLUtils.onReady(function(){    
        new FWDIGP({        
            thumbnailBackgroundColor:"#111111"     
            });
        });
</script>

正文内部的网格编码如下：

<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>

这是JavaScript上的函数

this.setupPoolThumbs = function() {
        for (var o = 0; o < this.maxThumbs; o++) {
            FWDIGPThumb.setPrototype();
            e = new FWDIGPThumb(this, this.thumbnailTransitionType_str, this.thumbnailBackgroundColor_str, this.thumbnailOverlayBackgroundColor_str, n.thumbnailOverlayOpacity, n.showThumbnailOverlay_bl, this.isMobile_bl, n.showThumbnailIcon_bl, i.disableThumbnailInteractivity_bl);
            e.setVisible(false);
            e.addListener(FWDIGPThumb.MOUSE_OVER, this.onMouseOverHandler);
            e.addListener(FWDIGPThumb.MOUSE_UP, this.onMouseUpHandler);                
        }
    };

如何随机化thumbnailBackgroundColor属性？

Javascript能够使用toString()函数将整数转换为base-16（十六进制）字符串。您可以使用此特定函数生成随机数，然后将其转换为有效的十六进制颜色字符串。

以下是基本代码（由Paul Irish提供）：

'#'+Math.floor(Math.random()*16777215).toString(16);

您可以将其内联放置在构造函数中，因此您的代码将如下所示：

FWDRLUtils.onReady(function(){    
    new FWDIGP({        
        thumbnailBackgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16)
    });
});
相关文章：