web-dev-qa-db-fra.com

Ajouter un style en ligne en utilisant Javascript

J'essaie d'ajouter ce code à un élément div créé dynamiquement

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

Le code dans lequel crée la dynamique div est

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

Mon idée est d’ajouter le style après < div class="well" mais je ne sais pas comment je le ferais.

javascriptcssinnerhtml
74
Curtis Crewe
nFilter.style.width='330px';
nFilter.style.float='left';

Cela devrait ajouter un style en ligne à l'élément.

107
Dharman

Vous pouvez le faire directement sur le style:

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;");
31
Mario Sannum

Utilisation de jQuery:

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

Autrement :

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

devrait marcher

10
Jean-Georges

Tu peux essayer avec ça

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

Cela devrait le faire pour vous.

9
Hector Romero
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);
9
James Kyburz

Quelques personnes ont un exemple utilisant setAttribute que j'aime bien. Cependant, cela suppose que vous n'avez aucun style actuellement défini. Je ferais peut-être quelque chose comme:

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

Ou faites-en une fonction d'aide comme celle-ci:

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

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

Cela garantit que vous pouvez ajouter des styles de manière continue et ne supprimera aucun style actuellement défini en ajoutant toujours les styles actuels. Il ajoute également un point-virgule supplémentaire de sorte que, s'il manque un style, il en ajoute un autre pour s'assurer qu'il est entièrement délimité.

4
stuyam

vous devriez faire une classe css .my_style puis utiliser .addClass('.mystyle')

2
bennett_an

Si vous ne voulez pas ajouter chaque propriété css ligne par ligne, vous pouvez faire quelque chose comme ceci:

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

Essayez quelque chose comme ça

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

Faites-le avec css maintenant que vous avez créé la classe. .well {width: 330px; float: gauche; }

0
Seth K

Utilisez cssText

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