Style w JS

Javascript udostępnia nam właściwość element.style, która zawiera w sobie informacje o stylowaniu dla danego elementu. Może ona zwracać dane wartości styli, lub je ustawiać.

Przykładowe zastosowanie tej właściwości możecie zobaczyć poniżej:

Jestem niesformatowany =(

function changeStyle() {
    var div = document.getElementById('niesformatowanyDIV');
    with (div.style) {
        backgroundColor = '#33CCCC';
        borderColor = '#336699';
        borderWidth = '1px';
        borderStyle = 'solid';
        fontFamily = 'Tahoma, Arial';
        lineHeight = '100px';
        fontSize = '13px';
        color = '#CCFFFF';
        width = '100px';
        height = '100px';
        textAlign = 'center';
    }
    div.innerHTML = 'zostałem sformatowany przez JS'
}

Zauważ, że podając wartość w liczbach podawałem też jednostki. W XHTML Strict jest to wymagane.

Nazwy właściwości stylowania

Czyżbyśmy musieli uczyć się na nowo wszystkich nazw formatowania? Niekoniecznie. Znając ich odpowiedniki w CSS, łatwo możemy je tworzyć w Javascripcie. Patrząc na powyższy przykład z łatwością możemy dostrzec, że większość nazw jest bardzo podobna do CSS, i tak:

  • w CSS mamy border-width, a w Javascript borderWidth
  • w CSS mamy background-color, a w Javascript backgroundColor
  • w CSS mamy border-width, a w Javascript borderWidth
  • w CSS mamy font-size, a w Javascript fontSize
  • w CSS mamy font-family, a w Javascript fontFamily
  • itp.

Znak "-" zostaje usunięty z nazwy, a słowo znajdujące się tuż po nim zostaje zapisane z Dużej litery.
Znając powyższą zasadę bez problemu poradzicie sobie w zmienianiu reszty styli. Czemu występują takie różnice? To logiczne. W końcu w Javascripcie znak "-" nie mógł być stosowany w nazwach, bo jest operatorem, za pomocą którego tworzy się równania.

Dodawanie i usuwanie klas styli

Powyższe sztywne metody sprawdzą się w kilku przypadkach, ale ogólne ich wykorzystanie jest bardzo niewygodne. O wiele lepszym rozwiązaniem jest dodawanie do elementów klas, które mamy w css.

W nowych przeglądarkach możemy do tego celu posłużyć się właściwością classList


var div = document.querySelector('#someDiv');

div.classList.remove("foo"); //usuwamy klasę .foo
div.classList.add("anotherClass"); //dodajemy klasę .anotherClass
div.classList.toggle("other"); //włączamy/wyłączamy klasę .other

ClassName

Jeżeli interesuje cię wsparcie starszych przeglądarek, wtedy będziesz musiał skorzystać z dodatkowego pluginu, lub wybrać klasyczną manipulację właściwością className. Właściwość ta nie udostępnia tak przyjemnych funkcji jak powyższe, ale też da się z tego wybrnąć.

Aby dodać klasę do obiektu, wystarczy dodać string do className:


var div = document.querySelector('#someDiv');
div.className += ' anotherClass ';

Do usuwania klasy musimy skorzystać z wyrażeń regularnych:


var div = document.querySelector('#someDiv');
var ourClass = 'anotherClass';

var regError = new RegExp('(\\s|^)'+classError+'(\\s|$)');
div.className = div.className.replace(regError, '');