Obiekt Style HTML DOM

obiekt Style

obiekt Style reprezentuje pojedyncze oświadczenie stylu.

atrybuty obiektu Style

atrybut opis
alignContent ustawia lub zwraca sposób w jaki wiersze w kontenerze elastycznym są wyrównywane, gdy projekty nie używają wszystkich dostępnych przestrzeni.
alignItems ustawia lub zwraca sposób w jaki projekt jest wyrównywany w kontenerze elastycznym.
alignSelf ustawia lub zwraca sposób w jaki projekt jest wyrównywany w kontenerze elastycznym.
animation skrócona atrybuty wszystkich atrybutów animacji, z wyjątkiem property animationPlayState.
animationDelay ustawia lub zwraca, kiedy animacja powinna zacząć się odtwarzać.
animationDirection ustawia lub zwraca, czy animacja powinna być odtwarzana w przeciwnym kierunku w cyklu alternacyjnym.
animationDuration ustawia lub zwraca czas w sekundach lub milisekundach potrzebny na zakończenie jednego cyklu animacji.
animationFillMode ustawia lub zwraca wartość zastosowaną poza czasem trwania animacji.
animationIterationCount ustawia lub zwraca liczbę razy, na które animacja powinna być odtwarzana.
animationName ustawia lub zwraca nazwę animacji @keyframes.
animationPlayState ustawia lub zwraca, czy animacja jest w trakcie uruchamiania czy wstrzymana.
animationTimingFunction ustawia lub zwraca krzywą prędkości animacji.
background ustawia lub zwraca wszystkie atrybuty tła w jednym wyrażeniu.
backgroundAttachment ustawia lub zwraca, czy obraz tła jest stały czy przesuwa się z stroną.
backgroundClip ustawia lub zwraca obszar rysowania tła.
backgroundColor ustawia lub zwraca kolor tła elementu.
backgroundImage ustawia lub zwraca obraz tła elementu.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Ustawienie lub zwracanie obszaru lokalizacji obrazu tła.
backgroundPosition Ustawienie lub zwracanie początkowego położenia obrazu tła.
backgroundRepeat Ustawienie lub zwracanie, jak obraz tła jest powtarzany (tapisowanie).
backgroundSize Ustawienie lub zwracanie rozmiaru obrazu tła.
backfaceVisibility Ustawienie lub zwracanie, czy element jest widoczny, gdy nie jest zwrócony do ekranu.
borderBottom Ustawienie lub zwracanie wszystkich właściwości borderBottom w jednym deklaracji.
borderBottomColor Ustawienie lub zwracanie koloru dolnego paska.
borderBottomLeftRadius Ustawienie lub zwracanie kształtu krawędzi lewego dolnego rogu.
borderBottomRightRadius Ustawienie lub zwracanie kształtu krawędzi prawego dolnego rogu.
borderBottomStyle Ustawienie lub zwracanie stylu dolnego paska.
borderBottomWidth Ustawienie lub zwracanie szerokości dolnego paska.
borderCollapse Ustawienie lub zwracanie, czy krawędź tabeli powinna być złożona w jedną krawędź.
borderColor Ustawienie lub zwracanie koloru krawędzi elementu (maksymalnie cztery wartości).
borderImage Skrócona właściwość do ustawienia lub zwracania wszystkich właściwości borderImage.
borderImageOutset Ustawienie lub zwracanie ilości, o którą obraz krawędzi wykracza poza box krawędzi.
borderImageRepeat Ustawienie lub zwracanie, czy obraz krawędzi powinien być powtarzany, obejmować lub rozciągać się.
borderImageSlice Ustawienie lub zwracanie odchylenia wewnętrznego krawędzi obrazu.
borderImageSource Ustawienie lub zwracanie obrazu używanego jako krawędzi.
borderImageWidth Ustawienie lub zwracanie szerokości krawędzi obrazu.
borderLeft Ustawienie lub zwracanie wszystkich właściwości borderLeft w jednym deklaracji.
borderLeftColor Ustawienie lub zwracanie koloru lewego paska.
borderLeftStyle Ustawienie lub zwracanie stylu lewego paska.
borderLeftWidth Ustawienie lub zwracanie szerokości lewego paska.
borderRadius Skrócona właściwość do ustawienia lub zwracania wszystkich czterech właściwości borderRadius.
borderRight Ustawienie lub zwracanie wszystkich właściwości borderRight w jednym deklaracji.
borderRightColor Ustawienie lub zwracanie koloru prawego paska.
borderRightStyle 设置或返回右边框的样式。
borderRightStyle ustawienie lub zwrócenie stylu prawej krawędzi.
borderRightWidth ustawienie lub zwrócenie szerokości prawej krawędzi.
borderSpacing ustawienie lub zwrócenie przestrzeni między komórkami tabeli.
borderStyle ustawienie lub zwrócenie stylu krawędzi elementu (maksymalnie cztery wartości).
borderTop ustawienie lub zwrócenie wszystkich właściwości borderTop w jednym deklaracji.
borderTopColor ustawienie lub zwrócenie koloru górnej krawędzi.
borderTopLeftRadius ustawienie lub zwrócenie kształtu górnej lewej krawędzi.
borderTopRightRadius ustawienie lub zwrócenie stylu górnej krawędzi.
borderTopWidth ustawienie lub zwrócenie szerokości górnej krawędzi.
borderWidth ustawienie lub zwrócenie szerokości krawędzi elementu (maksymalnie cztery wartości).
bottom ustawienie lub zwrócenie pozycji dolnej ramki elementu.
boxDecorationBreak ustawienie lub zwrócenie zachowania tła i krawędzi elementu podczas paginacji, lub dla elementów wewnętrznych, podczas przecięcia linii.
boxShadow dodanie jednego lub kilku cieni do ramki (box).
boxSizing pozwalające na zdefiniowanie, jak pewne elementy powinny dopasować się do określonej przestrzeni.
captionSide ustawienie lub zwrócenie pozycji tytułu tabeli.
caretColor ustawienie lub zwrócenie koloru wskaźnika/ikony.
clear ustawienie lub zwrócenie pozycji elementu względem obiektów pływających.
clip ustawienie lub zwrócenie części elementu, która ma być widoczna.
color ustawienie lub zwrócenie koloru tekstu.
columnCount ustawienie lub zwrócenie liczby kolumn, które element powinien dzielić.
columnFill ustawienie lub zwrócenie sposobu wypełniania kolumn.
columnGap ustawienie lub zwrócenie przestrzeni między kolumnami.
columnRule skrócona właściwość do ustawienia lub zwrócenia wszystkich właściwości columnRule.
columnRuleColor ustawienie lub zwrócenie koloru pomiędzy kolumnami.
columnRuleStyle ustawienie lub zwrócenie stylu pomiędzy kolumnami.
columnRuleWidth ustawienie lub zwrócenie szerokości pomiędzy kolumnami.
columns skrócona właściwość do ustawienia lub zwrócenia columnWidth i columnCount.
columnSpan ustawienie lub zwrócenie liczby kolumn, które element powinien przekraczać.
columnWidth ustawienie lub zwrócenie szerokości kolumny.
content Używanie z pseudo-elementami :before i :after, aby wstawić generowaną zawartość.
counterIncrement Zwiększanie jednego lub więcej liczników.
counterReset Tworzenie lub resetowanie jednego lub więcej liczników.
cursor Ustawienie lub zwracanie typu kursora wyświetlanego przez wskaźnik myszy.
direction Ustawienie lub zwracanie kierunku tekstu.
display Ustawienie lub zwracanie typu wyświetlania elementu.
emptyCells Ustawienie lub zwracanie tego, czy ramka i tło pustych komórek powinny być wyświetlane.
filter Ustawienie lub zwracanie filtra obrazu (efekty wizualne, takie jak rozmycie i nasycenie).
flex Ustawienie lub zwracanie długości elementu, w stosunku do reszty.
flexBasis Ustawienie lub zwracanie początkowej długości elementu elastycznego.
flexDirection Ustawienie lub zwracanie kierunku elementu elastycznego.
flexFlow Skrócona postać atrybutów flexDirection i flexWrap.
flexGrow Ustawienie lub zwracanie proporcji wzrostu elementu w stosunku do innych elementów.
flexShrink Ustawienie lub zwracanie sposobu kurczenia się elementu w stosunku do innych elementów.
flexWrap Ustawienie lub zwracanie tego, czy element elastyczny powinien być przecinany.
cssFloat Ustawienie lub zwracanie sposobu wyrównania poziomego elementu.
font Ustawienie lub zwracanie atrybutów czcionki w jednym deklaracji.
fontFamily Ustawienie lub zwracanie rodziny czcionki tekstu.
fontSize Ustawienie lub zwracanie rozmiaru czcionki tekstu.
fontStyle Ustawienie lub zwracanie tego, czy styl czcionki jest normalny, kursywny czy pochylony.
fontVariant Ustawienie lub zwracanie tego, czy czcionka powinna być wyświetlana małymi wielkimi literami.
fontWeight Ustawienie lub zwracanie grubości czcionki.
fontSizeAdjust Utrzymywanie czytelności tekstu podczas wystąpienia powrotu czcionki.
fontStretch Wybór sposobu rozciągnięcia czcionki z rodziny czcionek.
hangingPunctuation Określenie, czy znaki interpunkcyjne mogą być umieszczone poza ramką wiersza.
height Ustawienie lub zwracanie wysokości elementu.
hyphens Ustawienie sposobu dzielenia słów, aby poprawić układ akapitu.
icon Pozwalanie autorowi na ustawienie stylu elementu za pomocą odpowiedników znaczkowych.
imageOrientation Określenie kierunku obracania obrazu w prawo lub wzdłuż wskazówki zegara przez agenta użytkownika.
isolation Definiowanie, czy element musi tworzyć nową zawartość stosu.
justifyContent Ustawienie lub zwracanie sposobu wyrównania elementów w kontenerze elastycznym, gdy projekt nie używa wszystkich dostępnych przestrzeni.
left Ustawienie lub zwracanie lewej pozycji elementu lokalizacyjnego.
letterSpacing Ustawienie lub zwracanie przestrzeni między znakami w tekście.
lineHeight Ustawienie lub zwracanie odległości między wierszami tekstu.
listStyle Ustawienie lub zwracanie listy stylów w jednym wyrażeniu.
listStyleImage Ustawienie lub zwracanie obrazu jako znacznika listy.
listStylePosition Ustawienie lub zwracanie pozycji znacznika listy.
listStyleType Ustawienie lub zwracanie typu znacznika listy.
margin Ustawienie lub zwracanie marginesu zewnętrznego elementu (można ustawić maksymalnie cztery wartości).
marginBottom Ustawienie lub zwracanie dolnego marginesu zewnętrznego elementu.
marginLeft Ustawienie lub zwracanie lewego marginesu zewnętrznego elementu.
marginRight Ustawienie lub zwracanie prawego marginesu zewnętrznego elementu.
marginTop Ustawienie lub zwracanie górnej marginesu zewnętrznego elementu.
maxHeight Ustawienie lub zwracanie maksymalnej wysokości elementu.
maxWidth Ustawienie lub zwracanie maksymalnej szerokości elementu.
minHeight Ustawienie lub zwracanie minimalnej wysokości elementu.
minWidth Ustawienie lub zwracanie minimalnej szerokości elementu.
navDown Ustawienie lub zwracanie pozycji nawigacji przy użyciu przycisku nawigacyjnego w dół.
navIndex Ustawienie lub zwracanie kolejności skoku elementu.
navLeft Ustawienie lub zwracanie pozycji nawigacji przy użyciu przycisku nawigacyjnego w lewo.
navRight Ustawienie lub zwracanie pozycji nawigacji przy użyciu przycisku nawigacyjnego w prawo.
navUp Ustawienie lub zwracanie pozycji nawigacji przy użyciu przycisku nawigacyjnego w górę.
objectFit Określenie, jak zawartość elementu zastępującego ma się dopasować do ramki utworzonej przez jego wysokość i szerokość.
objectPosition Określenie, jak element zastępujący jest wyrównywany w swoim ramce.
opacity Ustawienie lub zwracanie poziomu nieprzejrzystości elementu.
order Ustawienie lub zwracanie kolejności elastycznego elementu w stosunku do pozostałych elementów.
orphans Ustawienie lub zwracanie minimalnej liczby wierszy, które muszą pozostać na dole strony, gdy element jest paginowany wewnętrznie.
outline Ustawienie lub zwracanie wszystkich właściwości outline w jednym wyrażeniu.
outlineColor Ustawienie lub zwracanie koloru otoczki elementu.
outlineOffset Przesunięcie otoczki i jej rysowanie poza krawędzią ramki.
outlineStyle Ustawienie lub zwracanie stylu otoczki elementu.
outlineWidth Ustawienie lub zwracanie szerokości otoczki elementu.
overflow Ustawienie lub zwracanie sposobu prezentacji treści poza krawędziami ramki elementu.
overflowX Zdefiniowanie, jak obsługiwać lewe/prawe krawędzie treści, jeśli przekraczają obszar zawartości elementu.
overflowY Określenie, jak处理内容的上/下边缘，如果它溢出元素的内容区域。
padding Ustawienie lub zwracanie wewnętrznych marginesów elementu (można ustawić maksymalnie cztery wartości).
paddingBottom Ustawienie lub zwracanie dolnego wewnętrznego marginesu elementu.
paddingLeft Ustawienie lub zwracanie lewego wewnętrznego marginesu elementu.
paddingRight Ustawienie lub zwracanie prawego wewnętrznego marginesu elementu.
paddingTop Ustawienie lub zwracanie górnej wewnętrznej marginesu elementu.
pageBreakAfter Ustawienie lub zwracanie zachowania paginacji za elementem.
pageBreakBefore Ustawienie lub zwracanie zachowania paginacji przed elementem.
pageBreakInside Ustawienie lub zwracanie zachowania paginacji wewnątrz elementu.
perspective Ustawienie lub zwracanie perspektywy na 3D element.
perspectiveOrigin Ustawienie lub zwracanie pozycji dolnej elementu 3D.
position Ustawienie lub zwracanie typu metody lokalizacji elementu (statyczne, względne, absolutne lub stałe).
quotes Ustawienie lub zwracanie typu cudzysłowia używanego do wewnętrznych cytatów.
resize Ustawienie lub zwracanie tego, czy element może być zmieniany wielkością przez użytkownika.
right Ustawienie lub zwracanie prawej pozycji elementu.
scrollBehavior Określenie, czy po kliknięciu w link wewnątrz paska przewijania ma być zastosowany efekt animacji przeciągania, zamiast bezpośredniego przejścia.
tableLayout Ustawienie lub zwracanie sposobu układu komórek, wierszy i kolumn w tabeli.
tabSize Ustawienie lub zwracanie długości tabulatora.
textAlign Ustawienie lub zwracanie sposobu poziomego wyważania tekstu.
textAlignLast Ustawienie lub zwracanie sposobu wyważania ostatniej linii bloku lub linii przymusowego przecinka, gdy text-align wynosi "justify".
textDecoration Ustawienie lub zwracanie dekoracji tekstu.
textDecorationColor Ustawienie lub zwracanie koloru dekoracji tekstu.
textDecorationLine Ustawienie lub zwracanie typu linii w dekoracji tekstu.
textDecorationStyle Ustawienie lub zwracanie stylu linii w dekoracji tekstu.
textIndent Ustawienie lub zwracanie wcięcia pierwszej linii tekstu.
textJustify Ustawienie lub zwracanie metody wyważania, używanej, gdy text-align wynosi "justify".
textOverflow Ustawienie lub zwracanie sytuacji, która ma się pojawić, gdy tekst przechodzi poza zawartość elementu.
textShadow Ustawienie lub zwracanie efektu cienia tekstu.
textTransform Ustawienie lub zwrócenie wielkości tekstu.
top Ustawienie lub zwrócenie pozycji górnej elementu w stosunku.
transform Zastosowanie 2D lub 3D przekształceń do elementu.
transformOrigin Ustawienie lub zwrócenie pozycji elementu przekształcanego.
transformStyle Ustawienie lub zwrócenie sposobu renderowania włożonych elementów w przestrzeni 3D.
transition Skrócona właściwość do ustawiania lub zwracania czterech właściwości przekształceń.
transitionProperty Ustawienie lub zwrócenie CSS właściwości efektu przejścia.
transitionDuration Ustawienie lub zwrócenie liczby sekund lub milisekund potrzebnych do zakończenia efektu przejścia.
transitionTimingFunction Ustawienie lub zwrócenie krzywej prędkości efektu przejścia.
transitionDelay Ustawienie lub zwrócenie momentu rozpoczęcia efektu przejścia.
unicodeBidi Ustawienie lub zwrócenie tego, czy tekst powinien być pokrywany, aby wspierać różne języki w tym samym dokumencie.
userSelect Ustawienie lub zwrócenie tego, czy tekst elementu można wybrać.
verticalAlign Ustawienie lub zwrócenie sposobu wertykalnego wyrównania treści elementu.
visibility Ustawienie lub zwrócenie tego, czy element jest widoczny.
whiteSpace Ustawienie lub zwrócenie sposobu przetwarzania tabulatorów, wierszy i spacj w tekście.
width Ustawienie lub zwrócenie szerokości elementu.
wordBreak Ustawienie lub zwrócenie zasad przecięcia wierszy dla nieCJK pism.
wordSpacing Ustawienie lub zwrócenie odstępu między słowami w tekście.
wordWrap Pozwala na przecięcie długich, nieprzerwanych słów i przenoszenie ich na nowy wiersz.
widows Ustawienie lub zwrócenie minimalnej liczby wierszy, które muszą być widoczne na górze strony.
zIndex Ustawienie lub zwrócenie kolejności układu elementu w stosunku.

Dostęp do obiektu Style

Można uzyskać dostęp do obiektu Style z części głowy dokumentu lub konkretnego elementu HTML.

Przykład 1

Dostęp do obiektu stylu z części głowy dokumentu:

var x = document.getElementsByTagName("STYLE");

Spróbuj sam

Przykład 2

Dostęp do obiektu stylu określonego elementu:

var x = document.getElementById("myH1").style;

Spróbuj sam

Tworzenie obiektu Style

Przykład 1

Możesz użyć metody document.createElement() do utworzenia elementu <style>:

var x = document.createElement("STYLE");

Spróbuj sam

Przykład 2

Możesz również ustawić atrybuty stylu istniejących elementów:

document.getElementById("myH1").style.color = "red";

Spróbuj sam

Strony związane

Kurs HTML:HTML CSS

Kurs CSS:Kurs CSS

Podręcznik HTML:HTML <style> znacznik

Podręcznik CSS:Atrybuty CSS