JavaScript 为页面上的所有 web-parts 分配颜色

Question

想定义一个 JavaScript 函数，我可以传入一些颜色，它将使用这些颜色将 web-part header 设置为这些颜色。

伪代码将循环遍历我的 web-parts（仅那些可见的 headers）并忽略那些不可见的 header。每个可见的 header 将被分配给作为参数提供的颜色数组中的下一个颜色。

如果传递了两种颜色，那么第一个可见的web-partheader使用color1，第二个可见的web-partheader，color2，第三个使用color1 , 等等..

$('#WebPartWPQ6_ChromeTitle').css('background-color', 'red');

我希望实现是：

<script type="text/javascript" data-Color="red, blue, black" src="../SiteAssets/js-enterprise/ColorHeaders.js"></script>

Answer 1

function addColor(colorArray){
    //Check if parameter is an array and has elements, if not throw exception
    if(!Array.isArray(colorArray) || colorArray.length === 0){
        throw "Parameter is not an array or empty!";
    }
    //Declare local count for moving through the array
    let count = 0;
    //Select all elements which are of type header, this uses a common class "header"
    //Use Array.forEach to iterate the collection of elements
    document.querySelectorAll('.ms-webpart-chrome-title').forEach(function(el){
        //Check visibility
        if(el.offsetWidth > 0 && el.offsetHeight > 0){
           //Set backgroundColor to current color of array
           el.style.backgroundColor = colorArray[count];
           //Move to next element in array or back to beginning
           count = count + 1 >= colorArray.length ? 0 : count + 1;
        }
    }
}

Answer 2

以下代码供大家参考。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    var colors=["red","blue","black"];
    $(".ms-webpart-chrome-title").each(function(i){     
        $(this).css('background-color',colors[i%colors.length]);
    });
});
</script>

JavaScript 为页面上的所有 web-parts 分配颜色

JavaScript to assign colors to all web-parts on a page

javascript

sharepoint-2013