Форум

Andrey163783 · #1 (**permalink**) 24.06.2017, 14:42

Ребят, помогите, не могу догнать как это сделать, вот кусок кода

Код:

  .left-form::before{
  content: '';
  display: none;
  height: 187px;
  width: 246px;
  outline: 4px solid #00aeef;
  position: absolute;
  left: 15px;
  top: 22px;
}
.left-form:focus::before{
display: block;
}
.left-form::after{
  content: '';
  display: none;
    width: 36px;
height: 36px;
background: #00aeef;
background-image: url("../img/ok.png");
background-repeat: no-repeat;
background-position: center;
position: absolute;
right: 72px;
top: 20px;
}
.left-form:focus::after{
display: block;
}

laimas · #2 (**permalink**) 24.06.2017, 19:21

Псевдоклассы в JS недоступны, можно получить значения всех стилей псевдокласса, а изменить нельзя.

j0hnik · #3 (**permalink**) 25.06.2017, 02:22

<html>
<head>
	<style>
	</style>
</head>
<body>
	<button id="id">Добавить</button>
	<script>
		document.getElementById("id").onclick = function(){
			document.querySelector('style').innerHTML += '\
			.left-form:before{\
				content: "";\
				display: none;\
				height: 187px;\
				width: 246px;\
				outline: 4px solid #00aeef;\
				position: absolute;\
				left: 15px;\
				top: 22px;\
			}\
			.left-form:focus:before{\
				display: block;\
			}\
			.left-form:after{\
				content: "";\
				display: none;\
				width: 36px;\
				height: 36px;\
				background: #00aeef;\
				background-image: url("../img/ok.png");\
				background-repeat: no-repeat;\
				background-position: center;\
				position: absolute;\
				right: 72px;\
				top: 20px;\
			}\
			.left-form:focus:after{\
				display: block;\
			}';
		};
	</script>
</body>
</html>

добавить можно так

Форум

Справочник

Discord чат

Курсы javascript