Как создать динамически созданные элементы с помощью CSS

Question

Как создать динамически созданные элементы с помощью CSS

Более ранние ответы подходят. Но я также хотел бы указать на более общую проблему.

Я столкнулся с подобной проблемой, и причиной было сетевое ограничение моей компании.

То же соединение получало успех, когда я был в любой другой сети.

-1

javascript html css responsive

задан Boreka 13 July 2018 в 14:41

3 ответа

Другие вопросы по тегам:

javascript html css responsive

Похожие вопросы:

score 2 · Answer 1

Вы можете создать класс и добавить этот класс для создания элементов.

Пример:

for (k = 1; k < 11; k++) {
    let div = document.createElement("div");
    div.setAttribute("onclick", "averageFunc(this, Number(prompt('Please, enter number here')))");
    div.className = 'custom-class';
    div.innerHTML = "0"
    document.getElementById("container3").appendChild(div)
}

.custom-class {
  background : red;
  color: white;
  width : 20px;
  height : 20px;
  margin-top :2px;
  text-align : center;
  border : 1px solid black;
}

<div id="container3"></div>

score 0 · Answer 2

При добавлении нового узла DOM браузер будет выполнять так называемый перерисовка узла, просто означая, что он повторно применит css к узлу DOM:

Динамические изменения Браузеры пытаются выполнить минимальный возможные действия в ответ на изменение. Таким образом, изменение цвета элемента приведет к перерисовке элемента. Изменение положения элемента приведет к компоновке и перерисовке элемента, его детей и, возможно, братьев и сестер. Добавление узла DOM приведет к компоновке и перерисовке узла. Основные изменения, такие как увеличение размера шрифта элемента «html», приведут к недействительности кешей, ретрансляции и перерисовки всего дерева.

Спасибо, когда я попробовал стилизацию с помощью CSS, я не мог этого сделать, по какой-то причине, поэтому я думал, что невозможно создать динамически созданные элементы с помощью CSS, я снова попробовал, и это действительно сработало! Большое спасибо. — Boreka, 13 July 2018 в 14:59

score 0 · Answer 3

Абсолютно используйте класс css и медиа-запрос для этого

let div = document.createElement("div");
// could abstract this to an addClass func for reuse
if (div.classList)
  div.classList.add('sweet-class-name');
else
  div.className += ' ' + 'sweet-class-name';
// the rest of your func

. Тогда в файле css

.sweet-class-name {
    ... all your default styles. I usually make mobile styles my defaults
}

@media screen and (min-width : 768px) {
   .sweet-class-name {
     // styles for screens bigger than 768px
   }
}

полезные ссылки, которые очень помогли мне, когда я начинал out

А также , почему мобильные основы первого и медиа-запросов

Удачи и получайте удовольствие!