Jak zmienić wygląd tekstu w JavaScript – Style CSS

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ć.

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

functionzmienStylowanie() {
    vardiv = 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'
}

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

Żródło:

http://kursjs.pl/kurs/canvas/canvas.html

by:KamilMarzec