Добавление собственных CSS элементов поверх сайта при помощи devtools, как правильно?

Question

[JRBRO]

Нашел интересное решение, как можно поверх сайта через консоль добавлять изображение,

тык сюды

function addOverlayImage(src, opacity) {
    const img = new Image();
    img.src = src;
    Object.assign(img.style, {
        position: 'fixed',
        left: 0,
        top: 0,
        width: '100vw',
        height: '100vh',
        opacity,
        objectFit: 'cover',
        objectPosition: 'center center',
        pointerEvents: 'none'
    });
    document.body.appendChild(img);
}
addOverlayImage('https://www.freeiconspng.com/thumbs/grid-png/grid-png-transparent-pic-18.png', 0.5);

А как можно нарисовать собственную сетку чтобы таким-же путем через консоль ее отображать?

Answer 1

[Александр Талалаев]

Ну так в вашем коде просто создаётся элемент, а потом добавляется в DOM дерево.
В конкретно вашем случае это картинка, у которой заданы соответствующие CSS чтобы она была поверх других элементов, ну и в конце её адрес.
Вы так же можете что-то свое сделать, не обязательно картинкой.

Comments

[JRBRO]

Я понимаю что можно, только никак не могу найти пример CSS таблицы чтобы вставить ее в JS. (что css, что js для меня темный лес и это единственное что мне пока надо).

Пробовал такие варианты, не сработало

function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),
        ratioH = Math.floor($(window).height()/size);

    var parent = $('<div />', {
        class: 'grid',
        width: ratioW  * size,
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1,
                height: size - 1
            }).appendTo(parent);
        }
    }
}

function createGrid(size) {
    var ratioW = Math.floor((window.innerWidth || document.documentElement.offsetWidth) / size),
        ratioH = Math.floor((window.innerHeight || document.documentElement.offsetHeight) / size);

    var parent = document.createElement('div');
    parent.className = 'grid';
    parent.style.width = (ratioW * size) + 'px';
    parent.style.height = (ratioH * size) + 'px';

    for (var i = 0; i < ratioH; i++) {
        for (var p = 0; p < ratioW; p++) {
            var cell = document.createElement('div');
            cell.style.height = (size - 1) + 'px';
            cell.style.width = (size - 1) + 'px';
            parent.appendChild(cell);
        }
    }

    document.body.appendChild(parent);
}

createGrid(10);

[Александр Талалаев]

JRBRO, мне кажется вы немного усложняете. Лучше взять небольшую png, сделать в ней основу сетки с нужным шагом, потом повесить поверх экрана сайта нужной ширины див, ему задним фоном с повторением эту пнг. Ну основную идею вы поняли. Выйдет и гибко(можно подготовить несколько пнг с разных шагом) и удобно и не нужно говородить тысяча пятьсот элементов в ДОМ