Блог

Главная - Вопросы по программированию - Как я могу заставить событие onclick работать для изменения атрибутов CSS?

Как я могу заставить событие onclick работать для изменения атрибутов CSS?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я новичок, пытающийся использовать Javascript. Я хотел бы изменить цвет шрифта и семейство шрифтов с помощью события onclick (а также градиент фонового изображения, но я даже не могу догадаться, как получить к нему доступ). Я создал кнопку, которая при нажатии должна запускать spookFunction и изменять цвет шрифта в теле на оранжевый, а семейство шрифтов — на Google font Bangers. Я попытался создать скрипку, чтобы вы могли увидеть код (я впервые использую JSFiddle, поэтому я не уверен, как это работает): https://jsfiddle.net/Linnea_Borealis/u8n9ezhs/10 / Я вырезал несколько примеров кода, которые я нашел, просто чтобы посмотреть, будет ли это работать, и сравнить с моим собственным кодом:

Нажмите на меня, чтобы изменить цвет текста.

     <script>
    function myFunction() {
    document.getElementById("demo").style.color = "red";
    }
    </script>

Эта часть работает нормально, а другая часть — нет. В чем разница?

Я заметил в VS Code, что «style» имеет другой цвет в «document.getElementById («welcome»).style.color =»red»», чем в «document.getElementsByTagName («body»).style.color =»orange»;» и «document.getElementsByTagName («body»).style.FontFamily=»Bangers», курсив;» Я неправильно использую getElementsByTagName ?

Кроме того, в JS Fiddle вокруг текста есть белый прямоугольник, который я не вижу, когда открываю html-файл в своем браузере… Почему? Я очень благодарен, если кто-нибудь может объяснить это простым способом для начинающих.

Ответ №1:

Белый прямоугольник — это ваше тело. Если вы добавите свой класс тела css background-color:black; , вы сможете его увидеть. И другие ответы верны для getElementsByTagName .

Попробуйте это:

 function myFunction() {
  document.getElementById("demo").style.color = "red";
}

function spookFunction() {
  document.getElementsByTagName("body")[0].style.color="orange";
  document.getElementsByTagName("body")[0].style.fontFamily="Bangers, cursive";
  document.getElementById("welcome").style.color="red"
 }  
 html {
  background-image: linear-gradient(#0099ff, white);
  min-height: 100%;
}
body {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  font-family: 'Lobster', cursive;
  color: white;
  background-color: black;
}

h1{ font-size: 50px; }
p {
  font-size: 30px;
}  
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spook My Page</title>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <link href="https://fonts.googleapis.com/css2?family=Bangersamp;family=Lobsteramp;display=swap" 
        rel="stylesheet">
    </head>
    <body>
        <h1 id="welcome">Welcome Friend!</h1> 
        <p>To change the color scheme — Click the button below!</p>
        <p id="demo" onclick="myFunction()">Click me to change my text color.</p>

        <button type="button" onclick="spookFunction()">Click Me!
        </button>
    </body>
</html>

Ответ №2:

getElementsByTagName возвращает массив вместо одного элемента. Таким образом, вам нужно будет получить доступ к элементу, подобному этому getElementsByTagName(«body»)[0] . Надеюсь, это поможет.

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

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

Ответ №3:

 function spookFunction() {
        document.getElementsByTagName("BODY")[0].style.backgroundColor="orange";
       document.getElementsByTagName("BODY")[0].style.fontFamily="Bangers,cursive";
        
        document.getElementById("welcome").style.backgroundColor="red"}

Это должно выполнить задание, вы использовали неправильное имя переменной для backgroundColor, и оно не смогло найти тело, потому что document.getElementsByTagName(«BODY») возвращает массив тегов