Помощь по событиям JS - при изменении свойства стиля

#javascript #syntax #dom-events #background-image

#javascript #синтаксис #dom-события #фоновое изображение

Вопрос:

Здесь у меня есть код, который я должен был сделать, чтобы изменить свойство стиля, мне удалось заставить его работать, но пришлось искать правильный способ размещения ‘, » и .

     document.getElementById('image').style.backgroundImage="url('"   element.src   "')";

У меня нет проблем с пониманием того, как это работает структурно, мой единственный вопрос заключается в том, почему дополнительные ‘, дополнительные » и дополнительные внутри, где вы вызываете элемент.src.

изначально я делал что-то подобное, и это, очевидно, не сработало, почему эти (‘» и «‘) заставили код работать…

любая помощь приветствуется

приветствия

 document.getElementById('image').style.backgroundImage="url(' element.src ')";

Ответ №1:

Давайте проанализируем все, начиная с вашего первого сегмента кода, и это должно дать вам лучшее понимание:

 document.getElementById('image').style.backgroundImage="url('"   element.src   "')";

document является переменной

getElementById является функцией, строка 'image' которой является параметром для этой функции.

style является ли свойство

backgroundImage это свойство, которое должно быть и должно принимать строку

"url('" является строкой

element является переменной, в данном случае объектом, src являющимся одним из его свойств.

"')" является строкой

Знаки используются для объединения строки, сформированной из "url('" , element.src и «‘)». Короче говоря, вы говорите: «создайте строку из "url('" element.src "')" и назначьте эту строку свойству backgroundImage .

Принимая во внимание, что в этом:

 document.getElementById('image').style.backgroundImage="url(' element.src ')";

Браузер понятия не имеет, что element.src это переменная, а не часть строки, поскольку вы заключили ее в двойные кавычки, сигнализируя, что все, что находится между кавычками, является строкой.

Ответ №2:

element является переменной вне строкового литерала, но внутри строкового литерала это просто элемент word.

 const element = "Hello!";

const first = "start element end";
const second = "start "   element   " end";

console.log({first,second});

1. хорошо, теперь я все понял! я думал, что это связано с некоторым соглашением в синтаксисе, вместо этого это единственный способ включить элемент.src, потому что в противном случае он преобразует его в строку, понял! действительно ценится

Ответ №3:

Внутри CSS вы должны поместить свой URL-адрес в кавычки или апострофы, так что это также должно быть переведено на javascript.

Когда вы вызываете событие DOM, оно будет делать это:

Исходный тег:

 <div src="http://example.com/image.png"></div>

после вызова функции javascript:

 <div style="background-image: url('http://example.com/image.png');" src="http://example.com/image.png"></div>

и поскольку вам нужно иметь какую-то кавычку в синтаксисе URL, вы должны использовать кавычки другого типа, например, '' в этом случае.

Для получения дополнительной информации о стиле фонового изображения вы можете перейти сюда: https://www.w3schools.com/css/css_background_image.asp

но чтобы полностью ответить на ваш вопрос, там используется, чтобы сказать, что вы хотите добавить туда что-то еще, например, другую строку или переменную.

Более подробная информация об этом здесь: https://www.w3schools.com/jsref/jsref_operators.asp (вам нужно прокрутить немного вниз до раздела строковые операторы).