Получить Установить Удалить 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
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 ССЫЛКИ ВМЕСТЕ
function dummy() {
alert("FOO!");
}
</script>
<a href="https://youtube.com" target="_blank" onclick="dummy()">
Это демонстрационная ссылка.
</a>
Наконец, давайте попробуем еще одну «фанковую комбинацию» — у нас есть href="URL"ссылка и onclickприкрепленный файл. Итак, здесь происходит то, что onclickсначала запускается перед открытием URL-ссылки. По крайней мере, в Google Chrome.