Как назначить свойства блоку div через свойство SetAttribute?

@csgorulit · Регистрация: 07.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые форумчане! Обращаюсь сюда, потому что возникла проблема: не получается добавить свойства к div элементу. Подскажите пожалуйста, что здесь не так? Выводится только текст...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var newDiv = document.createElement('div');
newDiv.id = 'div11';
newDiv.setAttribute('background',"#ff43a4");
newDiv.setAttribute('font','12pt sans-serif');
newDiv.setAttribute('color',"#1d1e33");
newDiv.setAttribute('width','100%');
newDiv.setAttribute('height','100%');
newDiv.setAttribute('float','left');
newDiv.setAttribute("color","#1d1e33");
newDiv.setAttribute("padding",'2%');
newDiv.setAttribute('margin',0);
newDiv.setAttribute('text-align','center');
newDiv.innerHTML = 'Это главный блок div';
document.body.insertBefore(newDiv,document.body.firstchild);

@Muxacuk · 15.10.2016, 22:50

setAttribute предназначен для добавления атрибутов а не CSS свойств, для добавления стилей предназначено свойство style пример использования:

JavaScript
1
newDiv.style.color= "#1d1e33"

@kalabuni · 15.10.2016, 23:31

csgorulit, кроме того, в последней строке кода правильным будет firstChild -- с буквой С в верхнем регистре

и ещё -- обращаю ваше внимание, что правило newDiv.style.width = '100%'; вряд ли сработает так, как вы этого желаете -- всё по высоте окно закрыть вам не удастся
проценты берутся от родительского элемента, т.е. от тега <body>, а высота тега <body> определяется высотой имеющегося в нём содержимого

@Muxacuk · 16.10.2016, 00:55

и ещё -- обращаю ваше внимание, что правило newDiv.style.width = '100%'; вряд ли сработает так, как вы этого желаете -- всё по высоте окно закрыть вам не удастся
проценты берутся от родительского элемента, т.е. от тега <body>, а высота тега <body> определяется высотой имеющегося в нём содержимого

я думаю вы имели в виду height а не width, и если говорить точно height:100% работает только если у родителя явно задана высота

@malafala · 16.10.2016, 11:52

csgorulit, лучше конечно сразу добавлять готовый класс из таблицы стилей по типу

JavaScript
1
2
3
4
var newDiv = document.createElement('div');
document.body.insertBefore(newDiv,document.body.firstchild);
newDiv.classList.add('//Ваш класс');
newDiv.innerHTML = 'Это главный блок div';

Добавлено через 6 минут
csgorulit, Вот более точный вариант:

JavaScript
1
2
3
4
var newDiv = document.createElement('div');
document.body.insertBefore(newDiv,document.body.firstchild);
newDiv.classList.add('classDiv');//Ваш готовый класс;
newDiv.innerHTML = 'Это главный блок div';

CSS
1
2
3
4
5
6
7
8
9
10
11
.classDiv {
    background:#ff43a4;
    font:12pt sans-serif;
    color:#1d1e33;
    width:100%;
    height:100%;
    float:left;
    padding:2%;
    margin:0;
    text-align:center;
}

@kalabuni · 16.10.2016, 12:07

Muxacuk, так точно, соображения высказал про высоту, а в инструкции почему-то вставил width -- переклинило

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	15.10.2016, 23:31
	csgorulit, кроме того, в последней строке кода правильным будет firstChild -- с буквой С в верхнем регистре и ещё -- обращаю ваше внимание, что правило newDiv.style.width = '100%'; вряд ли сработает так, как вы этого желаете -- всё по высоте окно закрыть вам не удастся проценты берутся от родительского элемента, т.е. от тега <body>, а высота тега <body> определяется высотой имеющегося в нём содержимого 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	16.10.2016, 12:07
	Muxacuk, так точно, соображения высказал про высоту, а в инструкции почему-то вставил width -- переклинило 0