Как назначить свойства блоку 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 -- переклинило

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@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