Додайте вбудований стиль за допомогою Javascript

Я намагаюся додати цей код до динамічно створеного елемента div

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

Код, в якому створюється динаміка, divє

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

Моя ідея полягає в тому, щоб додати стиль після, < div class="well"але я не знаю, як це зробити.

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

Це повинно додати елементу вбудований стиль.

Ви можете зробити це безпосередньо за стилем:

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;");

Використання jQuery:

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

В іншому випадку:

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

повинні працювати

Ви можете спробувати з цим

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

Це має зробити це за вас.

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);

Кілька людей мають приклад використання 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;');

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

вам слід створити клас css, .my_styleа потім використовувати.addClass('.mystyle')

Якщо ви не хочете додавати кожну властивість 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);

Використовуйте cssText

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

Спробуйте щось подібне

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

Зробіть це за допомогою css тепер, коли ви створили клас. .well {ширина: 330px; поплавок: ліворуч; }