149
Come aggiungere una classe per div?Come aggiungere una classe all'elemento DOM in JavaScript?
var new_row = document.createElement('div');
A
risposta
270
new_row.className = "aClassName";
Heres più informazioni MDN: className
+1
Psst, vuoi dire 'new_row'. – Zarel
+2
come impostare più nomi di classe? –
+3
@Sponge 'new_row.className =" aClassName1 aClassName2 ";' è solo un attributo, puoi assegnare qualsiasi stringa che ti piace, anche se rende invalido il codice html –
14
Qui sta lavorando il codice sorgente utilizzando la funzione approccio.
<html>
<head>
<style>
.news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="dd"></div>
<script>
(function(){
var countup = this;
var newNode = document.createElement('div');
newNode.className = 'textNode news content';
newNode.innerHTML = 'this created div contains class while created!!!';
document.getElementById('dd').appendChild(newNode);
})();
</script>
</body>
</html>
+6
Quindi? Serve come esempio, non c'è niente di sbagliato in questo. – Carey
3
Per cambiare attributo class per l'elemento HTML, utilizzare element.className:
const element = document.createElement('div');
element.className = 'foo';
svantaggio di questa soluzione è che ignora completamente l'attributo class. Ovviamente è possibile aggiungere class usando l'operatore += (element.className += " bar"), ma se questo elemento ha già questa classe, sarebbe inutilmente raddoppiato. Se vuoi aggiungere class all'elemento che ha già alcune classi, ad es. <div class="foo"></div>, IMHO la soluzione migliore sarebbe utilizzare element.classList. Ha add() metodo che permette di aggiungere una classe per elemento:
const element = document.querySelector('div.foo');
element.classList.add('bar');
È inoltre possibile attivare o disattivare o rimuovere classi utilizzando element.classList. Sfortunatamente, non è supportato da IE < = 9 e supportato solo parzialmente da IE 10 e 11. Vedere support table on caniuse.com. Tuttavia, v'è un shim che lavora per IE> = 8.
0
Vale anche la pena dare un'occhiata a
var el = document.getElementById('hello');
if(el) {
el.className += el.className ? ' someClass' : 'someClass';
}
9
C'è anche il modo DOM di fare questo in JavaScript:
// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName");
// Add some text
new_row.appendChild(document.createTextNode("Some text"));
// Add it to the document body
document.body.appendChild(new_row);
0
Anche questo funzionerà.
$(document.createElement('div')).addClass("form-group")
+1
Solo se si utilizza jQuery. –
0
var newItem = document.createElement('div');
newItem.style = ('background-color:red');
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);
+0
Considera di spiegare perché l'hai pubblicato, aiuterà gli altri a imparare. –
+0
Solo un esempio di codice funzionante –
Problemi correlati
- 1. Aggiungere una classe con javascript, non sostituire
- 2. Come aggiungere a dom in React?
- 3. Come posso rilevare DOM pronto e aggiungere una classe senza jQuery?
- 4. Aggiungere una classe a un div con javascript
- 5. Come ereditare una classe C++ in JavaScript?
- 6. Javascript efficiente per modifiche DOM
- 7. È una cattiva pratica aggiungere proprietà ai nodi DOM?
- 8. esegui javascript prima che dom stia caricando
- 9. Come posso aggiungere metodi da una classe Java come funzioni globali in Javascript usando Rhino?
- 10. Come aggiungere una classe a una cella in SlickGrid
- 11. jQuery show() non una funzione, utilizzata per aggiungere elementi DOM
- 12. JavaScript DOM rimuovi elemento
- 13. Come aggiungere una classe a particolari li?
- 14. CHtml :: link - come aggiungere una classe html?
- 15. Come aggiungere una classe con React.js?
- 16. Un parser JavaScript per DOM
- 17. iOS Javascript DOM "Congelamento?"
- 18. Come estendere DOM Element come classe (senza jQuery)
- 19. Elemento mobile JavaScript nel DOM
- 20. Aggiungere a una funzione javascript
- 21. node.js ispezionare dom come standard javascript
- 22. Come aggiungere una nuova classe css in @ Html.TextBox mvc4
- 23. Come aggiungere una classe al link in wp_nav_menu?
- 24. JavaScript: come serializzare un elemento DOM come una stringa da utilizzare in seguito?
- 25. Come aggiungere un elemento <image> al DOM SVG
- 26. Come aggiungere barre su una stringa in Javascript?
- 27. Come aggiungere una virgoletta singola nella variabile in Javascript?
- 28. aggiungere una funzione a una classe decorare
- 29. Javascript DOM style.backgroundColor non funziona correttamente
- 30. Come si può aggiungere una variabile di classe a una classe in Pharo?
Peccato che le specifiche non consente le classi da specificare come parametro per createElement. –