Ajouter un style en ligne à l'aide de Javascript


91

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

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

Le code dans lequel crée la dynamique divest

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.


1
Quelle différence cela fait? Le style en ligne aura toujours la spécificité la plus élevée.
Amberlamps

parce que le div est créé dynamiquement, je ne peux pas utiliser de statique puisqu'il s'agit d'un script de bibliothèque Javascript complet
Curtis Crewe

C'est peut-être un problème XY. Qu'essayez-vous d'accomplir? Est nFilter.style.width = '330px'; nFilter.style.float = 'left';ce que vous cherchez?
Amberlamps

Réponses:


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

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


37

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

6
Pas le style CSS mais la troisième option avec setAttribute fonctionnait parfaitement pour moi.
milkersarac

16

Utilisation de jQuery:

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

Autrement :

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

devrait marcher


6
Il n'est pas nécessaire d'utiliser JQuery dans ce cas
Dharman

10
Il donne une solution alternative sans JQuery. Ne voyez pas la nécessité d'un vote défavorable.
Termato

La solution JS vanilla correcte et demandée est-elle la solution alternative? Pas celui que personne n'a demandé et qui concerne une bibliothèque dont personne n'a parlé?
Silvio Langereis

14

Vous pouvez essayer avec ça

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

Cela devrait le faire pour vous.


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

7

Quelques personnes ont un exemple utilisant setAttribute que j'aime. Cependant, cela suppose que vous n'avez actuellement aucun style 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'assistance 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 y ajouter des styles en continu et ne supprimera aucun style actuellement défini en ajoutant toujours aux styles actuels. Il ajoute également un point-virgule supplémentaire pour que s'il manque un style, il en ajoutera un autre pour s'assurer qu'il est entièrement délimité.


3

vous devriez créer une classe css .my_stylepuis utiliser.addClass('.mystyle')


3

Si vous ne souhaitez pas ajouter chaque ligne de 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

Essayez quelque chose comme ça

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

-1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.