Задать вопрос

generate

...
Ответы пользователя по тегу CSS

  • Как получить значения из select (jquery.form.styler)?

    @generate
    ... 
    document.querySelector('#cities-select').onchange = function() {
  alert(this.value) //тут изменяешь
}
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше сделать темную/светлую тему для сайта?

    @generate
    ...
    Так можно изменить ссылку на стиль
    <!DOCTYPE html>
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="light.css" class="style">
</head>
<body>

<button id="color">Сменить цвет</button>

<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.querySelector('.style').href="dark.css";
	}
	document.querySelector('#color').onclick = function (){
		if (document.querySelector('.style').getAttribute('href') === 'light.css') {
			document.querySelector('.style').href="dark.css";
			localStorage.setItem('style', 'dark');
		} else {
			document.querySelector('.style').href="light.css";
			localStorage.setItem('style', 'light');
		}
	}
</script>

</body>
</html>


    Но лучше использовать селекторы чтобы менять стиль. И использовать один css файл

    <style type="text/css">
	body {
		background: #fff;
		color: #000;
	}
	#color {
		color: #fff;
		background: #000;
	}
	.dark {
		background: #000;
		color: #fff;
	}
	.dark #color {
	color: #000;
	background: #fff;
	}

</style>



<button id="color">Сменить цвет</button>
<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.body.classList.toggle('dark');
	}
	document.querySelector('#color').onclick = function (){
		document.body.classList.toggle('dark');
		if (document.body.getAttribute('class') == 'dark') {
			localStorage.setItem('style', 'dark');
		} else {
			localStorage.setItem('style', '');
		}
	}
</script>
    Ответ написан
    Комментировать
    Комментировать

  • Табы в JS. Как сделать так, чтобы при нажатии на кнопку повторно таб закрывался?

    @generate
    ...
    Нужно проверить если данный таб активен то убрать класс актив

    if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        }


    Полный код
    const tabsBtn = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");

tabsBtn.forEach(onTabClick);

function onTabClick(item) {
        item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTub = document.querySelector(tabId);
        
        if(currentBtn.classList.contains('active')){
            currentBtn.classList.remove('active');
            currentTub.classList.remove('active');
        } else if ( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });

            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });


            currentBtn.classList.add('active');
            currentTub.classList.add('active');
        }

    });
}
    Ответ написан
    2 комментария
    2 комментария

  • Как скачать сайт?

    @generate
    ...
    Я так скачиваю, домен с http
    wget -k -p domain.com —no-check-certificate
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает overflow-x: scroll?

    @generate
    ...
    overlof будет дейстовать только на элементы внутри, если внутри дива что то широкое то overlof сработает
    <code lang="html">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu
   {position: fixed
   width:100%;
   height:100vh;
   max-height: 100%;
}
.menucenter
   {position: relative;
     background: #000;
     overflow: auto;
      height: 400px;
 }
   .menucenter p {
       width: 200%;
   }
</style>
</head>
<body>

<div class="menu">
         <div class="menucenter">
          <p> text</p>  
         </div>
</div>
   
</body>
</html> 

</code>
    Ответ написан
    1 комментарий
    1 комментарий