Dodaj styl wbudowany za pomocą JavaScript

91

Próbuję dodać ten kod do dynamicznie utworzonego elementu div

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

Kod, w którym tworzy dynamikę, divto

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

Moim pomysłem jest dodanie stylu po, < div class="well"ale nie wiem, jak bym to zrobił.

Curtis Crewe
źródło
1
Jaką to robi różnicę? Styl inline zawsze będzie miał najwyższą specyfikę.
Amberlamps
ponieważ div jest tworzony dynamicznie, nie mogę używać statycznego, ponieważ jest to kompletny skrypt biblioteki JavaScript
Curtis Crewe,
Może to jest problem XY. Co próbujesz osiągnąć? Czy nFilter.style.width = '330px'; nFilter.style.float = 'left';to, czego szukasz?
Amberlamps

Odpowiedzi:

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

Powinno to dodać styl wbudowany do elementu.

Dharman
źródło
37

Możesz to zrobić bezpośrednio na stylu:

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;");
Mario S
źródło
6
Nie stylizacja CSS, ale trzecia opcja z setAttribute zadziałała idealnie.
milkersarac
16

Korzystanie z jQuery:

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

Inaczej :

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

powinno działać

Jean-Georges
źródło
6
W tym przypadku nie jest konieczne używanie JQuery
Dharman,
10
Daje alternatywne rozwiązanie bez JQuery. Nie widzę potrzeby głosowania przeciw.
Termato
Prawidłowe, żądane rozwiązanie Vanilla JS jest rozwiązaniem alternatywnym? Czy nie ta, o którą nikt nie pytał, dotyczyła biblioteki, o której nikt nie wspomniał?
Silvio Langereis
14

Możesz spróbować z tym

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

To powinno wystarczyć.

Hector Romero
źródło
10
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);
James Kyburz
źródło
7

Kilka osób ma przykład używania setAttribute, który mi się podoba. Zakłada się jednak, że nie masz obecnie ustawionych żadnych stylów. Może zrobiłbym coś takiego:

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

Lub przekształć go w funkcję pomocniczą, taką jak ta:

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

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

Daje to pewność, że możesz dodawać do niego style w sposób ciągły i nie usunie żadnego aktualnie ustawionego stylu, zawsze dołączając do bieżących stylów. Dodaje również dodatkowy średnik, więc jeśli w jakimś stylu kiedykolwiek brakuje jednego, doda inny, aby upewnić się, że jest w pełni oddzielony.

stuyam
źródło
3

powinieneś stworzyć klasę css, .my_stylea następnie użyć.addClass('.mystyle')

bennett_an
źródło
3

Jeśli nie chcesz dodawać każdej właściwości css wiersz po wierszu, możesz zrobić coś takiego:

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

Vincurekf
źródło
1

Użyj cssText

nFilter.style.cssText +=';width:330px;float:left;';
marbor3
źródło
1

Spróbuj czegoś takiego

document.getElementById("vid-holder").style.width=300 + "px";
Zubair Mushtaq
źródło
-1

Zrób to z css teraz, gdy utworzyłeś klasę. .well {width: 330px; float: left; }

Seth K.
źródło