Блог

Главная - Вопросы по программированию - Я пытаюсь изменить стиль html-ссылки с помощью функций javascript. Почему мой код не работает?

Я пытаюсь изменить стиль html-ссылки с помощью функций javascript. Почему мой код не работает?

#javascript #html

#javascript #HTML

Вопрос:

В консоли я получаю следующие типы ошибок:

Ошибка ссылки: недопустимое присвоение левой части

Ошибка ссылки: changeButtonOnMouseOver не определена

Вот мой код:

 <!DOCTYPE html>
<html>
<body>
<br />
<br />
<br />
<br />

<script>
    function changeButtonOnMouseOver()
    {
        document.getElementById("btn").style.background-color = "#00806f";
        document.getElementById("btn").style.cursor = "pointer";
    }
    function changeButtonOnClick()
    {
        document.getElementById("btn").style.box-shadow = "none";
        document.getElementById("btn").style.top = "5px";
    }
    function changeButtonOnMouseOut()
    {
        document.getElementById("btn").style.border-radius = "15px";
        document.getElementById("btn").style.background-color = "#009682";
        document.getElementById("btn").style.box-shadow = "0 5px 0 #00332c";
        document.getElementById("btn").style.color = "white";
        document.getElementById("btn").style.cursor = "auto";
        document.getElementById("btn").style.padding = "1em 1.5em";
        document.getElementById("btn").style.position = "relative";
        document.getElementById("btn").style.text-align = "center";
        document.getElementById("btn").style.text-decoration = "none";
        document.getElementById("btn").style.font-size = "x-large";
        document.getElementById("btn").style.font-weight = "800";
        document.getElementById("btn").style.outline = "none";
        document.getElementById("btn").style.border = "none";
    }
</script>

<a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()"

style="border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;" >

  Zur Anmeldung</a>

</body>
</html>

Я сделал ссылку похожей на кнопку, и я хочу изменить стиль с помощью функций javascript для событий onmouseover или onclick, чтобы это выглядело так, как будто вы нажимаете кнопку при нажатии на ссылку, но я не знаю, почему это не работает.

Комментарии:

1. Вы должны использовать camelCase property name в JavaScript……

2. Рассматривали ли вы возможность использования CSS с использованием состояний anchors? :hover , :focus и :active например.

3. @wbarton Я не могу использовать CSS. Я могу онлайн изменить стиль встроенным способом или через JavaScript.

Ответ №1:

Вы должны использовать имя свойства camelCase для style в JavaScript:

 function changeButtonOnMouseOver(){
  document.getElementById("btn").style.backgroundColor = "#00806f";
  document.getElementById("btn").style.cursor = "pointer";
}
function changeButtonOnClick(){
  document.getElementById("btn").style.boxShadow = "none";
  document.getElementById("btn").style.top = "5px";
}
function changeButtonOnMouseOut(){
  document.getElementById("btn").style.borderRadius = "15px";
  document.getElementById("btn").style.backgroundColor = "#009682";
  document.getElementById("btn").style.boxShadow = "0 5px 0 #00332c";
  document.getElementById("btn").style.color = "white";
  document.getElementById("btn").style.cursor = "auto";
  document.getElementById("btn").style.padding = "1em 1.5em";
  document.getElementById("btn").style.position = "relative";
  document.getElementById("btn").style.textAlign = "center";
  document.getElementById("btn").style.textDecoration = "none";
  document.getElementById("btn").style.fontSize = "x-large";
  document.getElementById("btn").style.fontWeight = "800";
  document.getElementById("btn").style.outline = "none";
  document.getElementById("btn").style.border = "none";
}  
 <a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()" style="border-radius: 15px;background-color: #009682;box-shadow: 0 5px 0 #00332c;color: white;padding: 1em 1.5em;position: relative;text-align: center;text-decoration: none;font-size: x-large;font-weight: 800;outline: none;border: none;">Zur Anmeldung</a>

Вы можете добиться того же с помощью чистого CSS:

 function changeButtonOnClick(){
  document.getElementById("btn").style.boxShadow = "none";
  document.getElementById("btn").style.top = "5px";
}  
 #btn, #btn:not(:hover){
  border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;
}
#btn:hover{
  background-color: #00806f;
  cursor: pointer;
}
#btn:not( :hover ){ 
  border-radius: 15px;
  background-color: #009682;
  box-shadow: 0 5px 0 #00332c;
  color: white;
  padding: 1em 1.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  font-size: x-large;
  font-weight: 800;
  outline: none;
  border: none;
}  
 <a id="btn" href="#" onclick="changeButtonOnClick()" >
Zur Anmeldung</a>

Комментарии:

1. Я не могу использовать классы, поэтому я не могу использовать: #btn{ border-radius: 15px; background-color: #009682; box-shadow: 0 5px 0 #00332c; цвет: белый; padding: 1em 1.5em; position: относительный; text-align: center; text-decoration: нет; font-size: x-large; font-weight: 800; outline: нет; border: нет; }

2. Добавление начального стиля inline уже работает. Что не работает, так это изменение его с помощью функций JavaScript для событий.

3. @kachris, первое решение в ответе показывает, что оно работает с использованием JavaScript….

Ответ №2:

Вы должны использовать camelCase для свойств style . Просто удалите - и сделайте букву после - заглавной буквы, например background-color => backgroundColor . Это будет то же самое для for - . Например:

 background-color => backgroundColor
border-left-width => borderLeftWidth

Смотрите в стороне о правилах именования переменных.

Вы можете вызывать переменную практически как угодно, но есть ограничения. Как правило, вы должны придерживаться только использования латинских символов (0-9, a-z, A-Z) и символа подчеркивания

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

Комментарии:

1. Я уже изменил часть JavaScript. Он по-прежнему не работает.

Ответ №3:

Ваш скрипт загружен еще до того, как идентификатор btn появится в DOM. Вы должны поместить свой скрипт после объявления идентификатора или настроить загрузку скрипта после завершения сборки DOM

Комментарии:

1. Я пробовал размещать часть сценария как до, так и после ссылки. Оба варианта не работают.

Ответ №4:

Поскольку вы не можете добавлять / редактировать CSS и использовать классы. Можете ли вы создать новый style узел, содержащий требуемые стили, с помощью JS?

 const styleNode = document.createElement('style');
styleNode.type = 'text/css';

const cssStyles = `
#btn {
    border-radius: 15px;
    background-color: #009682;
    box-shadow: 0 5px 0 #00332c;
    color: white;
    padding: 1em 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-size: x-large;
    font-weight: 800;
    outline: none;
    border: none;
}
#btn:hover{
    background-color: #00806f;
    cursor: pointer;
}
#btn:active {
    box-shadow: none;
    top: 5px;
}
`;

styleNode.appendChild(document.createTextNode(cssStyles));
document.getElementsByTagName('head')[0].appendChild(styleNode);  
 <a id="btn" href="#">Zur Anmeldung</a>