Как через JS задать случайный цвет
?

Question

Есть функция, которая возвращает случайно сгенерированный цвет в фомрмате #001122. Используя функцию нужно добавить для каждого параграфа рамку случайного цвета. Как добавить эту рамку?

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quam est debitis. Architecto quas asperiores
        blanditiis a fugiat impedit eum dolorem cum rerum dolorum iste amet, ratione assumenda expedita maiores?
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eligendi nemo est? Unde, doloribus, magnam
        necessitatibus eos quia aliquam eaque quis aspernatur placeat sequi autem officiis, modi a exercitationem totam.
    </p>
    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi doloremque magni ut corporis, perspiciatis
        tempore in, accusantium suscipit nemo quod saepe. Autem laudantium adipisci nemo magni repudiandae repellat
        error. Dolore?
    </p>
</body>

<script>

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

Answer 1

Вариантов масса, можно так..

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

let button = document.getElementById('butId');

button.addEventListener("click", function(e){
  let tags = document.getElementsByTagName('p');   
  for (let i = 0; i < tags.length; i++) {
    tags[i].style.border = "1px solid" + getRandomColor();
  }
});

<button id="butId">Изменить цвет</button>
<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quam est debitis. Architecto quas asperiores
        blanditiis a fugiat impedit eum dolorem cum rerum dolorum iste amet, ratione assumenda expedita maiores?
</p>
<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eligendi nemo est? Unde, doloribus, magnam
        necessitatibus eos quia aliquam eaque quis aspernatur placeat sequi autem officiis, modi a exercitationem totam.
</p>
<p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi doloremque magni ut corporis, perspiciatis
        tempore in, accusantium suscipit nemo quod saepe. Autem laudantium adipisci nemo magni repudiandae repellat
        error. Dolore?
</p>

Answer 2

// Достаём из документа все <p> в виде массива
let ps = document.querySelectorAll("p");

// Пеоебираем наш массив, вытягивая из него по-очереди 1 <p>
for (let p of ps) {
    // Устанавливаем этому параграфу CSS-свойство border
    p.style.border = `5px solid ${getRandomColor()}`;
}

Answer 3

Создаём рандомный HEX цвет

let p = document.querySelectorAll('body > p');

[...p].map(function (e) {
  e.style.color = '#'+(Math.random() * 0x1000000 | 0x1000000).toString(16).slice(1);
});

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quam est debitis. Architecto quas asperiores blanditiis a fugiat impedit eum dolorem cum rerum dolorum iste amet, ratione assumenda expedita maiores?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eligendi nemo est? Unde, doloribus, magnam necessitatibus eos quia aliquam eaque quis aspernatur placeat sequi autem officiis, modi a exercitationem totam.
</p>
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi doloremque magni ut corporis, perspiciatis tempore in, accusantium suscipit nemo quod saepe. Autem laudantium adipisci nemo magni repudiandae repellat error. Dolore?
</p>

БЛОГ НА HUSL

Как через JS задать случайный цвет
?

Ответы (3 шт):

БЛОГ НА HUSL

Как через JS задать случайный цвет ?

Ответы (3 шт):

Как через JS задать случайный цвет
?