Получить Установить Удалить HREF в Javascript (Простые примеры)

Добро пожаловать в краткий учебник о том, как получить, установить и удалить hrefсвойство в Javascript. К настоящему времени вы должны знать hrefочень хорошо. Это «вещь», которую мы используем, чтобы указать, на какую веб-страницу ссылаться. Но как мы можем динамически изменить или удалить его с помощью Javascript? Для быстрого ответа:
• Чтобы получить href –let link = document.querySelector("#ID").href;
• Чтобы установить href – document.querySelector("#ID").href = "http://site.com";
• В качестве альтернативы, чтобы настроить href для запуска функции Javascript – document.querySelector("#ID").href = "javascript:FUNCTION()";
• Чтобы удалить href - document.querySelector("#ID").removeAttribute("href");
Это охватывает краткие основы, но читайте дальше, чтобы увидеть больше примеров!

ПОЛУЧИТЬ HREF

<!-- демо ссылка -->
<a href="https://youtube.com" id="demo">youtube</a>
<!-- получить HREF -->
<script>
function hrefget() {
alert(document.querySelector("#demo").href);
}
</script>
<input type="button" value="получить href" onclick="hrefget()"/>

Да, это так просто. Мы можем получить текущий href с помощью ELEMENT.href.

УСТАНОВИТЕ HREF НА URL

<!-- демо ссылка -->
<a href="#" id="demo">демо</a>
<!-- установить URL HREF -->
<script>
function hrefseturl() {
document.querySelector("#demo").href = "https://youtube.com";
alert("Установить URL-адрес");
}
</script>
<input type="button" value="установить URL href" onclick="hrefseturl()"/>

Чтобы установить или изменить href ссылки, просто назначьте новый — ELEMENT.href = "http://site.com".

НАСТРОЙТЕ HREF НА ФУНКЦИЮ JAVASCRIPT

<!-- демо ссылка -->
<a href="#" id="demo">демо</a>
<!-- ПОЛУЧИТЬ JS HREF -->
<script>
function foo() {
alert("Foo!");
}
function hrefsetjs() {
document.querySelector("#demo").href = "javascript:foo()";
alert("получить JS функцию");
}
</script>
<input type="button" value="получить JS href" onclick="hrefsetjs()"/>

УДАЛИТЬ HREF

<!-- демо ссылка -->
<a href="https://youtube.com" id="demo">youtube</a>
<!-- УДАЛИТЬ HREF -->
<script>
function hrefdel() {
document.querySelector("#demo").href = "";
// document.querySelector("#demo").removeAttribute("href");
alert("удалить url");
}
</script>
<input type="button" value="удалить href" onclick="hrefdel()"/>

Мы можем удалить href:
• Установка пустого href –ELEMENT.href = ""
• Или удалить его полностью -ELEMENT.removeAttribute("href")
Обратите внимание на разницу здесь.
• Пустой href эквивалентен указанию на саму текущую страницу href="#".
• Но полное удаление href приведет к ссылке «ничего не делать при нажатии».

ONCLICK И JAVASCRIPT HREF

<script>
function dummyA() {
alert("A");
}
function dummyB() {
alert("B");
}
</script>
<a href="javascript:dummyA()" onclick="dummyB()">
Это демонстрационная ссылка.
</a>

Как вы уже знаете, мы можем использовать href="javascript:FUNCTION()"для запуска функции Javascript. Но обратите внимание, что мы также можем прикрепить onclick="FUNCTION()", чтобы сделать то же самое. Что произойдет, если мы сделаем и то, onclick и другое href="javascript:"вместе? Как видно из приведенного выше примера, dummyB() сначала запустится , а затем dummyA().

ONCLICK И URL ССЫЛКИ ВМЕСТЕ

<script>
function dummy() {
alert("FOO!");
}
</script>
<a href="https://youtube.com" target="_blank" onclick="dummy()">
Это демонстрационная ссылка.
</a>

Наконец, давайте попробуем еще одну «фанковую комбинацию» — у нас есть href="URL"ссылка и onclickприкрепленный файл. Итак, здесь происходит то, что onclickсначала запускается перед открытием URL-ссылки. По крайней мере, в Google Chrome.

Обсуждение закрыто.