Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #71 (permalink)  
Старый 27.06.2023, 15:33
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Alexandroppolus, благодарю за подсказку!)
P.S. Пока такое высшая математика((
Ответить с цитированием
  #72 (permalink)  
Старый 27.06.2023, 15:53
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,013

Борис К,
это весьма и весьма далеко от высшей математики.

0) открой консоль разработчика на странице своего приложения, лучше в Хроме

1) введи строку document.styleSheets , нажми энтер.

2) тебе вывалится здоровенный объект, и раскрывая ветви дерева, ты увидишь всю правду о таблицах стилей в твоем документе.

Остается только с помощью js забрать из этого объекта всё нужное.
Ответить с цитированием
  #73 (permalink)  
Старый 28.06.2023, 18:20
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Сообщение от Alexandroppolus
это весьма и весьма далеко от высшей математики
Это я образно о своих "способностях"!((
Сообщение от Alexandroppolus
0) открой консоль разработчика на странице своего приложения, лучше в Хроме

1) введи строку document.styleSheets , нажми энтер.

2) тебе вывалится здоровенный объект, и раскрывая ветви дерева, ты увидишь всю правду о таблицах стилей в твоем документе.

Остается только с помощью js забрать из этого объекта всё нужное.
Благодарю за подсказку!))
Ответить с цитированием
  #74 (permalink)  
Старый 28.06.2023, 18:45
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,775

Сообщение от Alexandroppolus
ты увидишь всю правду о таблицах стилей в твоем документе.
И потом можно медитировать над
https://developer.mozilla.org/en-US/...nt/styleSheets
https://developer.mozilla.org/en-US/.../CSSStyleSheet
https://developer.mozilla.org/en-US/...eb/API/CSSRule
https://developer.mozilla.org/en-US/...I/CSSStyleRule
и связанными темами.
CSSom немного посложнеее, чем Dom на мой взгляд.
+ некоторые неточности по сравнению с тем, что реально есть в браузере.

Последний раз редактировалось voraa, 28.06.2023 в 18:57.
Ответить с цитированием
  #75 (permalink)  
Старый 29.06.2023, 10:43
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Voraa, спасибо за ссылки!))
/Но только не ругайтесь за следующий вопрос)/
Вообще возможно ли сделать так, чтобы в массиве обсуждаемого кода, например, вместо одного из изображений ("https://loremflickr.com/150/150/girl?random=1") был красный квадрат, созданный из следующего стиля:
background-color: #ff0000;
            width: 150px;
            height: 150px;
?
P.S. У меня есть опасения, что я мог быть ранее неправильно понят.((
Ответить с цитированием
  #76 (permalink)  
Старый 29.06.2023, 12:21
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,775

Многое чего можно сделать. Весь вопрос в сложности.
Зачем для каждого квадрата в css указывать width и height? Разве они могут отличаться?
Достаточно создать одно правило для всех квадратов (через класс и атрибут) и там указать ширину и высоту
[data-id] {
            width: 150px;
            height: 150px;
        }
[data-id="girl"] {
            background-image:url(https://loremflickr.com/150/150/girl?random=1);
        }
[data-id="dog"] {
            background-image:url(https://loremflickr.com/150/150/dog?random=2);
        }
[data-id="boy"] {
            background-image:url(https://loremflickr.com/150/150/boy?random=3);
        }
[data-id="kitten"] {
            background-image:url(https://loremflickr.com/150/150/kitten?random=4);
        }
Ответить с цитированием
  #77 (permalink)  
Старый 29.06.2023, 12:58
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Сообщение от voraa
Зачем для каждого квадрата в css указывать width и height? Разве они могут отличаться?
Достаточно создать одно правило для всех квадратов (через класс и атрибут) и там указать ширину и высоту
Да, бесспорно! Но вопрос в том, как в массиве JS указать путь к стилям... например, я хочу, чтобы вместо реального изображения был красный квадратик, как я описал выше, созданный стилем:
Сообщение от Борис К
background-color: #ff0000;
            width: 150px;
            height: 150px;
P.S. Извините, если туманно изъясняюсь
Ответить с цитированием
  #78 (permalink)  
Старый 29.06.2023, 13:40
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,775

Я не вижу всей задачи.
Как вариант, если это то, о чем я думаю, то в массиве надо указывать не только значение, но и свойство стиля.
const images = [
            ['backgroundImage',"url(https://loremflickr.com/150/150/girl?random=1)"],
            ['backgroundImage',"url(https://loremflickr.com/150/150/dog?random=2)"],
            ['bacgroundColor', "red"],
            ['backgroundImage',"url(https://loremflickr.com/150/150/kitten?random=4)"]
        ];

и задавать стиль
elem.style[Images[k][0]] = Images[k][1];
Ответить с цитированием
  #79 (permalink)  
Старый 29.06.2023, 13:46
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,775

Как вариант, оставить, как у вас, но проверять, что в строке. Скажем если строка содержит "/", то это url и тогда устанавливать картинку. А если нет, то это - цвет.

Если надо установить только один раз и не менять потом, то можно строку задания картинки указывать c url(...) и просто
elem.style.background = Image[k]
При задании обобщенного свойства background браузер сам разбирается, что там цвет или картинка

Последний раз редактировалось voraa, 29.06.2023 в 14:01.
Ответить с цитированием
  #80 (permalink)  
Старый 29.06.2023, 17:06
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Сообщение от voraa
Я не вижу всей задачи.
Voraa, я максимально упростил код представленный выше до сути настоящего вопроса:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
[data-id="red"] {
 height: 100px;
 width: 100px;
 border-top: 30px solid #ff0000;
 border-right: 30px solid #ff0000;
 border-bottom: 30px solid #ff0000;
 border-left: 30px solid #ff0000;
}

[data-id="blue"] {
 height: 100px;
 width: 100px;
 border-top: 30px solid #0000ff;
 border-right: 30px solid #0000ff;
 border-bottom: 30px solid #0000ff;
 border-left: 30px solid #0000ff;
}                    
    </style>
</head>
<body>
    <script>
        function shuffle(array) {
            return array;
        }
        const x = 150;
        const y = 150; 
        const w = 2; 
        const images = [
            "https://loremflickr.com/150/150/girl?random=1",
            "https://loremflickr.com/150/150/dog?random=1",
            "https://loremflickr.com/150/150/car?random=1",
            "https://loremflickr.com/150/150/kitten?random=1"
        ];
        const h = Math.ceil(images.length / w);
        const canvas = Object.assign(document.createElement('canvas'), {
            width: w * x,
            height: h * y
        });
        document.body.prepend(canvas);
        const ctx = canvas.getContext('2d')         
        const createImg = () => Promise.all(
            shuffle(images).map((src, i) => new Promise(
                (onload) => Object.assign(new Image(), {
                    src,
                    onload
                })
            ).then(({
                target
            }) => {
                const hPos = Math.floor(i / w);
                const wPos = i - (hPos * w);
                ctx.drawImage(
                    target,
                    wPos * x,
                    hPos * y,
                    x,
                    y
                )
            }))
        );
        createImg()
    </script>
</body>
</html>

Теперь, например хотелось бы, чтобы в массиве скрипта вместо двух изображений были две рамочки ([data-id="red"] и [data-id="blue"] , которые прописаны в стилях.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито wowtschuk AJAX и COMET 1 07.03.2017 01:34
Повременная смена изображений jozev Элементы интерфейса 2 01.08.2011 18:43
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11
Скролл мини изображений I-Trap Элементы интерфейса 1 25.11.2009 22:03