Блог

Главная - Вопросы по программированию - Привет! Я пытаюсь создать кнопку, которая изменит макет сетки css

Привет! Я пытаюсь создать кнопку, которая изменит макет сетки css

#css #css-grid

#css #css-grid

Вопрос:

Я пытаюсь создать кнопку, которая изменит макет сетки css. У меня есть класс с именем container с информацией о моей сетке.

Я хочу изменить сетку нажатием кнопки либо с помощью html и css, либо с помощью js.

Есть ли такой же способ, как наведение курсора мыши, нажмите на кнопку и измените css для этого щелчка.

Комментарии:

1. Да, вероятно, есть способ. Какие способы вы пробовали до сих пор? Пожалуйста, можете ли вы поделиться ими?

2. Я попытался создать html-кнопку с классом «mybtn. Затем я в js попытался зарегистрировать щелчок. но я не уверен, как изменить css с помощью js и ссылаться на сетку. Я смог изменить цвет текста в стиле, но это все. Я очень новичок во всем этом, и я пытаюсь сосредоточиться на onclick, поскольку я видел несколько способов щелкнуть объект на странице.

Ответ №1:

Если вы хотите, чтобы это было только на время нажатия, тогда вам следует попробовать что-то вроде этого (css):

 #myElement:active{
     /*Code Here*/
}

Если вы хотите, чтобы она оставалась такой после щелчка, я бы использовал js. Пример:

HTML

 <button onclick="myFunction()">Click Me</button>

и js

 function myFunction(){
    document.getElementById('myElement').style.gridTemplateColumns = "auto auto auto"
}

Рабочий пример

 function changeGrid(){
  document.getElementById("grid").style.gridTemplateColumns = "auto auto auto"
} 
 #grid{
  display: grid;
  grid-template-columns: auto auto;
} 
 <button onclick="changeGrid()">Change Grid</button>

<div id="grid">
<div>
hi
</div>
<div>
hello
</div>
<div>
yello
</div>
<div>
hey
</div>
<div>
wassup
</div>
<div>
yo
</div>
</div>

Комментарии:

1. Есть ли способ, чтобы это работало по имени класса вместо идентификатора? Также я получаю эту ошибку: Uncaught TypeError: document.getElementsById не является функцией

2. да, вы могли бы попробовать document.querySelectorAll('.container') , или document.getElementsByClassname() ( developer.mozilla.org/en-US/docs/Web/API/Document /… и developer.mozilla.org/en-US/docs/Web/API/Document /… ). Кто-нибудь, не стесняйтесь улучшать этот js, это не моя компетенция

3. кроме того, @ighc, document.getElementsById это не функция, а document.getElementById есть. Единственное число для элементов, а не множественное число

4. и не забывайте, что вы также можете добавить идентификатор к элементу, у которого есть класс, если есть только один из них

5. Спасибо! Я смог заставить это работать. Это также способ изменить области шаблона сетки?