Javascript для установки свойств css grid-template-columns и grid-template-rows

Я ищу эквивалент для grid-template-columns и grid-template-rows для javascript dom. Я сделал простой макет сетки в html и css:

<div class = "box">
    <div id = "box1"><a href = "#">box1</a></div>
    <div id = "box2"><a href = "#">box2</a></div>
    <div id = "box3"><a href = "#">box3</a></div>
    <div id = "box4"><a href = "#">box4</a></div>
</div>

.box {
    display: grid;  
    grid-template-columns: 33% auto;
    grid-template-rows: 350px 588px;
}

Я хочу отредактировать стиль для grid-template-columns и grid-template-rows в javascript, но обнаружил, что javascript dom не поддерживает это свойство. Есть ли другой способ отредактировать поля, чтобы изменить их размер?

Спасибо за помощь.

javascript html css

31.10.2018 19:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

463

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать .style.gridTemplateColumns для изменения столбцов и .style.gridTemplateRows для строк:

let a = true
setInterval(() => {
  let box = document.getElementById('box')
  box.style.gridTemplateColumns = a ? "20% auto" : "30% auto"
  box.style.gridTemplateRows = a ? "50px 50px" : "150px 188px"
  a = !a
}, 500)

.box {
  display: grid;
  grid-template-columns: 33% auto;
  grid-template-rows: 150px 188px;
}

<div id = "box" class = "box">
  <div id = "box1"><a href = "#">box1</a></div>
  <div id = "box2"><a href = "#">box2</a></div>
  <div id = "box3"><a href = "#">box3</a></div>
  <div id = "box4"><a href = "#">box4</a></div>
</div>

Где в вашем коде находятся вопросительный знак и функция let a = true?

— 31.10.2018 20:25

@Duco, это тернарный оператор. Он просто меняет css между этими двумя значениями в зависимости от того, является ли a истинным или ложным.

— 31.10.2018 20:56

Есть ли способ использовать переменные для значений gridTemplateColumns и gridTemplateRows?

— 13.11.2018 20:24

31.10.2018 20:01