Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   CSS класс добавляется в div но свойства не применяются (https://javascript.ru/forum/events/72460-css-klass-dobavlyaetsya-v-div-no-svojjstva-ne-primenyayutsya.html)

OggybigDoggy 30.01.2018 17:37
CSS класс добавляется в div но свойства не применяются
 
Добавляю класс в тег div, но свойства не применяются к элементам

вот JS
function myFunction() {
	var x = document.getElementById("myTopnav");

	if ( document.getElementById("myTopnav").classList.contains("responsive") ) {
		document.getElementById("myTopnav").classList.remove("responsive");	
	} else {
		document.getElementById("myTopnav").classList.add("responsive");
	}
}

вот CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Raleway', sans-serif;
}

a {
	text-decoration: none;
}

li {
	text-decoration: none;
	list-style: none;
}


.logo {
	background: black;
	width: 100%;
	display: flex;
	justify-content: center; 
}

.graficlogo {
	padding: 5px;
	max-width: 100%;
	box-sizing: border-box;
}

nav {
	margin: auto;
	width: 800px;
	height: 100px;
}

.top-nav {
	background: #fff;
	font-size: 14px;
	margin-top: 40px;
}

.top-nav a {
	color: #000;
	text-align: center;
	padding: 14px 16px;
	font-style: 15px; 
									/*border-radius: 50%*/
}
									/*добавить плавность анимацииы*/
.top-nav a:hover {
	 border-bottom: 2px solid #000; /*округленный ховер border-bottom: 10px solid #000;*//*как выпуклые кнопки box-shadow: 0 2px 2px 0 black; */
}

.top-nav .icon {
	display: none;
}

@media screen and (max-width: 768px) {
	.top-nav a:not(:first-child) {
		display: none;
	}

	.top-nav a.icon {
		float: right;
		margin-top: -17px;
		display: block;
		color: black;
	}
	nav {
		width: 100%;
		height: 100px;
	}
	

}

.top-nav .responsive{
		position: relative;
	}
.top-nav .responsive a.icon{
		position: absolute;
		right: 0;
		top: 0;
	}
.top-nav .responsive a {
		display: block;
		float: none;
		text-align: left;
	}

вот HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mirralise</title>
	<link rel = "stylesheet" href = "css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<script src = "js/script.js" ></script>
</head>
<body>
	<header>
		<div class="logo">
			<a href="index.html"><img class = "graficlogo" src="img/logo.png" alt="Logo"></a>
		</div>
		<nav>
			<div class="top-nav" id="myTopnav">
				<a href="index.html">HOME</a>
				<a href="projects.html">PROJECTS</a>
				<a href="blog.html">BLOG</a>
				<a href="contact.html">CONTACT</a>
				<a href="about.html">ABOUT</a>
				<a href="services.html">SERVICES</a>
				<a href="location.html">LOCATION</a>
				<a id = "menu" onclick = "myFunction()" href="#" class = "icon">&#9776</a>
			</div>
		</nav>
	</header>



</body>
</html>

сори за объем, я просто не пойму где проблема
помогите пжста

Nexus 30.01.2018 17:49
У ClassList есть метод "toggle".
https://developer.mozilla.org/ru/doc...BE%D0%B4%D1%8B

Пробел удалите в CSS между "top-nav" и "responsive":
".top-nav.responsive"

рони 30.01.2018 17:55
OggybigDoggy,
css пробелы уберите .top-nav здесь .responsive

рони 30.01.2018 18:00
OggybigDoggy,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mirralise</title>
  <style type="text/css">
 * {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Raleway', sans-serif;
}

a {
  text-decoration: none;
}

li {
  text-decoration: none;
  list-style: none;
}


.logo {
  background: black;
  width: 100%;
  display: flex;
  justify-content: center;
}

.graficlogo {
  padding: 5px;
  max-width: 100%;
  box-sizing: border-box;
}

nav {
  margin: auto;
  width: 800px;
  height: 100px;
}

.top-nav {
  background: #fff;
  font-size: 14px;
  margin-top: 40px;
}

.top-nav a {
  color: #000;
  text-align: center;
  padding: 14px 16px;
  font-style: 15px;
                  /*border-radius: 50%*/
}
                  /*добавить плавность анимацииы*/
.top-nav a:hover {
   border-bottom: 2px solid #000; /*округленный ховер border-bottom: 10px solid #000;*//*как выпуклые кнопки box-shadow: 0 2px 2px 0 black; */
}

.top-nav .icon {
  display: none;
}

@media screen and (max-width: 768px) {
  .top-nav a:not(:first-child) {
    display: none;
  }

  .top-nav a.icon {
    float: right;
    margin-top: -17px;
    display: block;
    color: black;
  }
  nav {
    width: 100%;
    height: 100px;
  }


}

.top-nav.responsive{
    position: relative;
  }
.top-nav.responsive a.icon{
    position: absolute;
    right: 0;
    top: 0;
  }
.top-nav.responsive a {
    display: block;
    float: none;
    text-align: left;
  }

  </style>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>function myFunction(event) {
  event.preventDefault();
  var elem = document.getElementById("myTopnav");
  elem.classList.toggle("responsive")
}
</script>
</head>
<body>
  <header>
    <div class="logo">
      <a href="index.html"><img class = "graficlogo" src="img/logo.png" alt="Logo"></a>
    </div>
    <nav>
      <div class="top-nav" id="myTopnav">
        <a href="index.html">HOME</a>
        <a href="projects.html">PROJECTS</a>
        <a href="blog.html">BLOG</a>
        <a href="contact.html">CONTACT</a>
        <a href="about.html">ABOUT</a>
        <a href="services.html">SERVICES</a>
        <a href="location.html">LOCATION</a>
        <a id = "menu" onclick = "myFunction(event)" href="#" class = "icon">&#9776</a>
      </div>
    </nav>
  </header>



</body>
</html>

OggybigDoggy 01.02.2018 12:03
Не думал что так быстро откликнетесь.
Спасибо за помощь в таком глупом вопросе :yes:


Часовой пояс GMT +3, время: 20:35.