Editar um css usando javacript
Estou tentando alterar um css via javascript mas por algum motivo da erro
se puder ajudar agradeço
html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!--Titulo-->
<title>Projeto</title>
<!--Cadeia de caracteres-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content="ei=edge">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<header></header>
<input type="checkbox" id="chk" onclick="chk()">
<label for="chk" class="menu-chk">☰</label>
<div class="bg"></div>
<nav class="menu" id="principal">
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Sobre</a></li>
</ul>
</nav>
<footer>
<script type="text/javascript" src="js/javascript.js"></script>
</footer>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
header{
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #5b859a;
}
.menu-chk{
position: fixed;
font-size: 25px;
font-weight: bold;
padding: 5px;
width: 40px;
height: 40px;
text-align: center;
background-color: #5b859a;
color: #fff;
cursor: pointer;
transition: all.4s;
left: 301px;
top: 0;
}
.menu-chk:hover{
background-color: #fff;
color: #5b859a;
}
.menu{
height: 100%;
position: fixed;
background-color: #222;
top: 0;
overflow: hidden;
transition: all .4s;
}
#principal{
width: 300px;
left: -300px;
}
ul{
list-style: none;
}
ul li a{
display: block;
font-size: 18px;
font-family: 'Arial';
padding: 10px;
border-bottom: solid 1px #000;
color: #ccc;
text-decoration: none;
transition: all.4s;
}
ul li span{
float: right;
padding-right: 10px;
}
ul li a:hover{
background-color: #5b859a;
}
.home{
margin-top: 60px;
background-color: #111;
border-left: solid 5px #444;
}
js
function chk() {
var chk = document.getElementById('chk');
var menu = document.getElementById('principal');
chk.is(':checked'){
menu.style.left = "300px";
}
}Discussão (2)
Carregando comentários...