JavaScript для назначения цветов всем веб-частям на странице

Question

Хотелось бы определить функцию JavaScript, которую я могу передать в некоторых цветах, и она будет использовать эти цвета для установки заголовков веб-частей на эти цвета.

Псевдокод будет циклически проходить через мой веб-части (только те, которые имеют видимые заголовки) и игнорировать те, которые не имеют видимого заголовка. Каждый видимый заголовок будет назначен следующему цвету в массиве цветов, который был указан в качестве параметра.

Если были переданы два цвета, тогда первый видимый заголовок веб-части будет использовать color1, второй видимый заголовок веб-части, 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

Следующий код для вашей справки.

<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>

Answer 2

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;
        }
    }
}