Всем привет! Я полный нуб в JS и прошу помощи. Гуглил много, но видимо моих знаний не хватает. Суть такая. Есть изображение, добавленное в html и у него нет id и только class . Как я могу с помощью JS или jQuery заменить картинку Вот фрагмент html:
Пытался присвоить id с помощью:
function myFoo1()
и заменять:
$(‘#defimage’).attr(‘src’, ‘/fileservice/file/download/a/233337/sc/494/h/c803022e0f37921830b75a0d243e73e0.png’)
Отслеживать
533 5 5 серебряных знаков 14 14 бронзовых знаков
задан 13 дек 2020 в 21:11
Константин Константин
11 1 1 бронзовый знак
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
element.querySelector(); — найдет первый попавшийся элемент.
const image = document.querySelector(‘.image’); image.setAttribute(‘src’, ‘https://picsum.photos/200/300?grayscale’);
если картинок несколько
const images = document.querySelectorAll(‘.image’); images.forEach((image) => < image.setAttribute(‘src’, ‘https://picsum.photos/200/300?grayscale’); >);
Отслеживать
ответ дан 13 дек 2020 в 21:21
7,424 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков
Представим ситуацию, что у нас есть сайт, на котором есть всё, а нам нужна лишь картинка.
Изменение картинки на сайте, с помощью просмотра кода элемента.
Первое, что я бы советовал сделать, это найти её родителя, который имеет идентификатор и чем уникальнее, тем лучше.
Допустим мы нашли и это выглядит так:
Как выглядит жираф
Жираф
Нам нужно обратиться к этому родителю по идентификатору, потом найти в нём все картинки, а после чего уже по порядковому номеру (индексу) найти именно нашу.
document // Обратимся к документу .getElementById(‘content’) // Потому к родителю .getElementsByTagName(‘img’)[0] // Возмём в нём первый по счёту элемент IMG .src = ‘//i.imgur.com/vsDvm4a.png’ // И изменим в нём ссылку на нужную.
Как выглядит жираф
Жираф
Если наша картинка будет не первой, а допустим десятой, то нам нужно указать .getElementsByTagName(‘img’)[9] (9, потому что отсчёт с нуля).
В jQuery запись будет проще:
$(‘#content img’) // Ищем IMG в родителе .eq(0) // Берём первую картинку .attr(‘src’, ‘//i.imgur.com/vsDvm4a.png’); // Меняем значение атрибута SRC на своё
Как выглядит жираф
Жираф
Источник: ru.stackoverflow.com
Как пользоваться вкладкой Elements
Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.
Как поменять аватарку ВКонтакте на летнюю 2022
Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.
В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.
Поменять текст
Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.
Попробуйте повторить приём ниже. Где пробовать.
Поменять картинку
Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.
В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.
Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.
Найти блок вёрстки
Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.
Видно, что они “вложены” в строку — при желании их можно “свернуть”:
При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.
Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.
С инструментами разработчика любой блок на странице сайта найти проще простого, но вот повторить трюк с текстовым редактором и HTML файлом будет куда сложнее. Ориентируйтесь по названию тега, его классам и его родителям. Например:
body> article> . div class=»row js-article-content»>
С помощью инструментов разработчика вы поняли, что вам нужен элемент . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .
Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега — этот элемент на странице всегда один и находится на самом верху.
В коде теги ищут по их родителям
Скопировать элемент
Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.
Удалить элемент
Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .
В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.
В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).
Попробуйте бесплатные уроки по Python
Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.
Переходите на страницу учебных модулей «Девмана» и выбирайте тему.
Источник: dvmn.org
Как по API сменить пользователю аватар в VK?
Как по API сменить авторизированному пользователю аватару в VK без подтверждения «save_dialog»?
Допустим, я знаю зная access_token, или он авторизировался другим методом, но не через логин/пароль.
Вот нашел функцию которая это делает https://vk.com/pages?oid=-1Параметр photo_hash необходим для подтверждения пользователем изменения его фотографии через вызов метода saveProfilePhoto Javascript API.»
Я немного не понимаю, это только для javascript api? Тоесть, для php api (звучит по-дурацки:) не надо проходить проверку?
Или нужны какие-то особые права доступа, чтобы не было подтверждений?
Источник: qna.habr.com