Добавьте встроенный стиль, используя Javascript

Я пытаюсь добавить этот код к динамически созданному элементу div

style = "width:330px;float:left;"

Код, в котором создается динамический div,

var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>' + sSearchStr + '</label>';

Моя идея - добавить стиль после < div class="well", но я не знаю, как это сделать.

Ответ 1

nFilter.style.width='330px';
nFilter.style.float='left';

Это должно добавить к элементу встроенный стиль.

Ответ 2

Вы можете сделать это непосредственно по стилю:

var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>'+sSearchStr+'</label>';

// Css styling
nFilter.style.width = "330px";
nFilter.style.float = "left";

// or
nFilter.setAttribute("style", "width:330px;float:left;");

Ответ 3

Использование jQuery:

$(nFilter).attr("style","whatever");

В противном случае:

nFilter.setAttribute("style", "whatever");

должен работать

Ответ 4

Вы можете попробовать с этим

nFilter.style.cssText = 'width:330px;float:left;';

Это должно сделать это для вас.

Ответ 5

var div = document.createElement('div');
div.setAttribute('style', 'width:330px; float:left');
div.setAttribute('class', 'well');
var label = document.createElement('label');
label.innerHTML = 'YOUR TEXT HERE';
div.appendChild(label);

Ответ 6

вы должны сделать класс css .my_style, затем используйте .addClass('.mystyle')

Ответ 7

Сделайте это с помощью css теперь, когда вы создали класс. .Что ж { ширина: 330px; плыть налево; }

Ответ 8

Используйте cssText

nFilter.style.cssText +=';width:330px;float:left;';

Ответ 9

Попробуйте что-то вроде этого

document.getElementById("vid-holder").style.width=300 + "px";

Ответ 10

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

document.body.insertAdjacentHTML('afterbegin','<div id="div"></div>');

/**
 * Add styles to DOM element
 * @element DOM element
 * @styles object with css styles
 */
function addStyles(element,styles){
  for(id in styles){
    element.style[id] = styles[id];
  }
}

// usage
var nFilter = document.getElementById('div');
var styles = {
  color: "red"
  ,width: "100px"
  ,height: "100px"
  ,display: "block"
  ,border: "1px solid blue"
}
addStyles(nFilter,styles);

Ответ 11

У нескольких людей есть пример использования setAttribute, который мне нравится. Однако предполагается, что у вас нет установленных стилей. Я мог бы сделать что-то вроде:

nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');

Или превратите его в вспомогательную функцию следующим образом:

function setStyle(el, css){
  el.setAttribute('style', el.getAttribute('style') + ';' + css);
}

setStyle(nFilter, 'width:330px;float:left;');

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