Festlegen der CSS-Eigenschaft in JavaScript?

Habe ich die folgenden...

var menu = document.createElement('select');

Wie würde ich jetzt setzen Sie CSS Attribute e.g width: 100px?

InformationsquelleAutor der Frage Skizit | 2011-03-04

  1. 190

    Verwenden - element.style:

    var element = document.createElement('select');
element.style.width = "100px";

    InformationsquelleAutor der Antwort kjy112

  2. 49

    Nur die style:

    var menu = document.createElement("select");
menu.style.width = "100px";

    Oder, wenn Sie wollen, können Sie jQuery:

    $(menu).css("width", "100px");

    InformationsquelleAutor der Antwort GenericTypeTea

  3. 24

    Für die meisten Arten tun dies:

    var obj = document.createElement('select');
obj.style.width= "100px";

    Für Stile, die Bindestriche in den Namen tun Sie dies:

    var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

    InformationsquelleAutor der Antwort Daniel X Moore

  4. 15

    Geht das eigentlich Recht einfach mit vanilla JavaScript:

    menu.style.width = "100px";

    InformationsquelleAutor der Antwort Justin Niessner

  5. 14

    Alle Antworten sagen Sie richtig, wie das zu tun, was Sie gefragt, aber ich würde raten, mit JavaScript zu setzen, eine Klasse auf das element und style es mit CSS. So sind Sie halten die richtige Trennung zwischen Verhalten und Stil.

    Vorstellen, wenn Sie ein designer in neu-Stil auf der Seite... Sie sollten in der Lage sein, zu arbeiten, rein in CSS die zimmerreserviereung, ohne das die Arbeit mit Ihr JavaScript.

    In Prototyp, den ich tun würde:

    $(newElement).addClassName('blah')

    InformationsquelleAutor der Antwort Nick

  6. 5

    wenn Sie möchten, fügen Sie eine Globale Eigenschaft, die Sie verwenden können:

        var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

    InformationsquelleAutor der Antwort Hetdev

  7. 2
    <h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

    InformationsquelleAutor der Antwort Mohsin Khan

  8. 2

    Beim Debuggen, ich mag in der Lage sein, um das hinzufügen von ein paar css-Attribute in einer Zeile:

    menu.style.cssText = 'width: 100px';

    Immer verwendet, um diesen Stil können Sie eine Reihe von css in einer Zeile etwa so:

    menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

    InformationsquelleAutor der Antwort afable

  9. 1
    <body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

    InformationsquelleAutor der Antwort Mohsin Khan

Schreibe einen Kommentar