Как изменить стиль для элементов HTML (стилизованных внешне с помощью CSS) с помощью JS? - PullRequest
Новая
       39

Как изменить стиль для элементов HTML (стилизованных внешне с помощью CSS) с помощью JS?

0 голосов
/ 01 марта 2019

поэтому, когда я нажимаю на тег <p> домашнего класса, я хочу, чтобы он поменял цвет на зеленый, но он не работает и не знаю почему.щелчок регистрируется нормально (так как console.log ("test") отображается нормально), но остальная функция изменения цвета не будет работать.вот мой код css, html и js (код js содержится в HTML, так что это не внешний файл или что-либо еще): 

.greyRect {

  height:150px;
  width:1350px;

  background-color: #D3D3D3;


}
h1 {
  text-align: center;
}
h2 {
    text-align: center;
}
.home {



box-sizing: border-box;
width:80px;
height:35px;

line-height: 2;
  position: relative;
left:350;
  color:white;

}
.casinocraps {
  background-color: grey;

box-sizing: border-box;
width:120px;
height:35px;
text-align: center;
line-height: 2;
  position: relative;
left:460;
bottom:50;
  color:white;
}
.tictactoe {
  background-color: grey;
  box-sizing: border-box;
  width:90px;
  height:35px;
  text-align: center;
line-height: 2;
    position: relative;
left:600;
bottom:100;
    color:white;
}
.bingo {
  background-color: grey;
  box-sizing: border-box;
  width:80px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:700;
  bottom:150;
    color:white;
}
.concentration {
  background-color: grey;
  box-sizing: border-box;
  width:100px;
  height:35px;
  text-align: center;
  line-height: 2;
    position: relative;
  left:800;
  bottom:200;
    color:white;
}
footer {
  text-align: center;
    line-height: 4;
      position: relative;
  top:125;
  right:15;
  height:70px;
  width:1365px;

  background-color: #D3D3D3;
}
.border {
  height: 50px;
  width: 100px;
  border: 4px solid green;
  background-color: #555;
  position: relative;
  top:20;
  left:100;
}
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
  position: relative;
  top:50;
  left:100;
}
<html>
  <head>

    <meta charset="utf-8">

    <title></title>
      <link rel="stylesheet" type="text/css" href="cssForAss4.css">
  </head>
  <body>

<header class="greyRect" >
<h1>Assignment 1</h1>

<h2>Home Page</h2>
<nav>
<p class="home" onclick="selectHome()">
Home
</p>
<p class="casinocraps">

<b>Casino Craps</b>
</p>
<p class="tictactoe">

<b>Tic-Tac-Toe</b>
</p>
<p class="bingo">

<b>Bingo</b>
</p>
<p class="concentration">

<b>Concentration</b>
</p>
</nav>
<div class="border">
</div>
<footer >Footer</footer>

</header>

<script>
function selectHome() {
  console.log("test");

document.getElementsByClassName("home").style += "background-color:green;";


}
</script>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 01 марта 2019

.style на самом деле является объектом js с ключами, соответствующими свойствам css.

Как сказал Адарш 

document.getElementsByClassName("home")[0].style.backgroundColor = "green"

Редактировать - Не делайте этого.Как объясняет Скотт Маркус, это довольно плохо.Определенно следует использовать querySelector ('. Home'), чтобы получить элемент.

Как правило, если свойство имеет дефис, подобный background-color, вы конвертируете его в регистр верблюдов, т.е. backroundColor

. MDN - HTMLElement.style

0 голосов
/ 02 марта 2019

Другие предложили .getElementsByClassName("home")[0], и это ужасная идея.

Сначала .getElementsByClassName() возвращает список узлов всех соответствующих элементов.Если вас интересует только первое, нет смысла его искать, а затем продолжать поиск на наличие совпадений, а затем отбрасывать все, кроме первого, что и делает этот код.

Во-вторых,.getElementsByClassName() возвращает «живой» список узлов.Это означает, что каждый раз, когда вы взаимодействуете со списком, во всем DOM снова выполняется поиск совпадений, что гарантирует, что в вашем списке установлены самые последние данные.Это может быть полезно в приложениях, где узлы добавляются и удаляются динамически, но эти варианты использования не так распространены.

FYI: .getElementsByTagName(), .getElementsByName() и node.childNodes также возвращают списки активных узлов,Если нет необходимости вести актуальный список, лучше всего использовать .querySelectorAll().И, честно говоря, даже если вам нужен обновленный список узлов, вам все же лучше использовать .querySelectorAll() и просто запустить его снова вручную в том месте, где вам нужен обновленный список.

Вот вам хорошая страница , которая обсуждает это и вот что она должна сказать:

Как думать о живом объекте?

Живой объект не интуитивен.Вы можете думать об этом как о отложенной оценке или ленивой оценке. Метод или свойство живого объекта пересчитывается при обращении к его результату.

А вот JSPerf , чтобы показатьразница в производительности между живым и статическим списком узлов.

Но в этом случае нам даже не нужен список узлов, мы просто хотим один узел.Правильное решение будет следующим: 

document.querySelector(".home");

.querySelector() сканирует документ на наличие первого элемента, который соответствует предоставленному селектору, и, если он найден, возвращает ссылку на этот единственный узел.В противном случае возвращается undefined.

0 голосов
/ 01 марта 2019

Сделай так: 

function selectHome() {
  console.log("test");

  document.getElementsByClassName("home")[0].style.backgroundColor = "green";


}
.greyRect {
  height: 150px;
  width: 1350px;
  background-color: #D3D3D3;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.home {
  box-sizing: border-box;
  width: 80px;
  height: 35px;
  line-height: 2;
  position: relative;
  left: 350;
  color: white;
}

.casinocraps {
  background-color: grey;
  box-sizing: border-box;
  width: 120px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 460;
  bottom: 50;
  color: white;
}

.tictactoe {
  background-color: grey;
  box-sizing: border-box;
  width: 90px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 600;
  bottom: 100;
  color: white;
}

.bingo {
  background-color: grey;
  box-sizing: border-box;
  width: 80px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 700;
  bottom: 150;
  color: white;
}

.concentration {
  background-color: grey;
  box-sizing: border-box;
  width: 100px;
  height: 35px;
  text-align: center;
  line-height: 2;
  position: relative;
  left: 800;
  bottom: 200;
  color: white;
}

footer {
  text-align: center;
  line-height: 4;
  position: relative;
  top: 125;
  right: 15;
  height: 70px;
  width: 1365px;
  background-color: #D3D3D3;
}

.border {
  height: 50px;
  width: 100px;
  border: 4px solid green;
  background-color: #555;
  position: relative;
  top: 20;
  left: 100;
}

.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
  position: relative;
  top: 50;
  left: 100;
}
<html>

<head>

  <meta charset="utf-8">

  <title></title>
  <link rel="stylesheet" type="text/css" href="cssForAss4.css">
</head>

<body>

  <header class="greyRect">
    <h1>Assignment 1</h1>

    <h2>Home Page</h2>
    <nav>
      <p class="home" onclick="selectHome()">
        Home
      </p>

  <p class="casinocraps">

    <b>Casino Craps</b>
  </p>
  <p class="tictactoe">

    <b>Tic-Tac-Toe</b>
  </p>
  <p class="bingo">

    <b>Bingo</b>
  </p>
  <p class="concentration">

    <b>Concentration</b>
  </p>
  </nav>
  <div class="border">
  </div>
  <footer>Footer</footer>

  </header>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...