
27.06.2023, 15:33
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Alexandroppolus, благодарю за подсказку!)
P.S. Пока такое высшая математика((
|
|

27.06.2023, 15:53
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,013
|
|
Борис К,
это весьма и весьма далеко от высшей математики.
0) открой консоль разработчика на странице своего приложения, лучше в Хроме
1) введи строку document.styleSheets , нажми энтер.
2) тебе вывалится здоровенный объект, и раскрывая ветви дерева, ты увидишь всю правду о таблицах стилей в твоем документе.
Остается только с помощью js забрать из этого объекта всё нужное.
|
|

28.06.2023, 18:20
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Сообщение от Alexandroppolus
|
это весьма и весьма далеко от высшей математики
|
Это я образно о своих "способностях"!((
Сообщение от Alexandroppolus
|
0) открой консоль разработчика на странице своего приложения, лучше в Хроме
1) введи строку document.styleSheets , нажми энтер.
2) тебе вывалится здоровенный объект, и раскрывая ветви дерева, ты увидишь всю правду о таблицах стилей в твоем документе.
Остается только с помощью js забрать из этого объекта всё нужное.
|
Благодарю за подсказку!))
|
|

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. У меня есть опасения, что я мог быть ранее неправильно понят.((
|
|

29.06.2023, 12:21
|
 |
Профессор
|
|
Регистрация: 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);
}
|
|

29.06.2023, 12:58
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Сообщение от voraa
|
Зачем для каждого квадрата в css указывать width и height? Разве они могут отличаться?
Достаточно создать одно правило для всех квадратов (через класс и атрибут) и там указать ширину и высоту
|
Да, бесспорно! Но вопрос в том, как в массиве JS указать путь к стилям... например, я хочу, чтобы вместо реального изображения был красный квадратик, как я описал выше, созданный стилем:
Сообщение от Борис К
|
background-color: #ff0000;
width: 150px;
height: 150px;
|
P.S. Извините, если туманно изъясняюсь 
|
|

29.06.2023, 13:40
|
 |
Профессор
|
|
Регистрация: 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];
|
|

29.06.2023, 13:46
|
 |
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,775
|
|
Как вариант, оставить, как у вас, но проверять, что в строке. Скажем если строка содержит "/", то это url и тогда устанавливать картинку. А если нет, то это - цвет.
Если надо установить только один раз и не менять потом, то можно строку задания картинки указывать c url(...) и просто
elem.style.background = Image[k]
При задании обобщенного свойства background браузер сам разбирается, что там цвет или картинка
Последний раз редактировалось voraa, 29.06.2023 в 14:01.
|
|

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"] , которые прописаны в стилях.
|
|
|
|