JavaScript - DOM Style


Właściwości Style

właściwość opis
animation Określa animacje oparte na klatkach kluczowych.
animationPlayState Określa, czy animacja jest uruchomiona, czy wstrzymana.
backgroundColor Definiuje kolor tła elementu.
backgroundImage Definiuje obraz tła elementu.
backgroundRepeat Określa jak obraz tła ma być powtarzany (kafelkowany).
border Ustawia szerokość, styl i kolor dla wszystkich czterech boków obramowania elementu.
borderTop Ustawia szerokość, styl i kolor górnej krawędzi elementu.
borderRight Ustawia szerokość, styl i kolor prawej krawędzi elementu.
borderBottom Ustawia szerokość, styl i kolor dolnej krawędzi elementu.
borderLeft Ustawia szerokość, styl i kolor lewego obramowania elementu.
color Określa kolor tekstu elementu.
columnCount Określa liczbę kolumn w elemencie wielokolumnowym.
columns Skrócona właściwość służąca do ustawiania właściwości szerokości kolumny i liczby kolumn.
font Definiuje różne właściwości czcionki w ramach jednej deklaracji.
fontSize Określa rozmiar czcionki tekstu.
fontStyle Definiuje styl czcionki tekstu.
height Określ wysokość elementu.
justifyContent Określa, w jaki sposób elementy elastyczne są wyrównane wzdłuż głównej osi kontenera elastycznego po rozwiązaniu wszelkich elastycznych długości i automatycznych marginesów.
letterSpacing Ustawia odstępy między literami.
lineHeight Ustawia wysokość między wierszami tekstu.
margin Ustawia margines na wszystkich czterech bokach elementu.
marginTop Ustawia górny margines elementu.
marginRight Ustawia prawy margines elementu.
marginBottom Ustawia dolny margines elementu.
marginLeft Ustawia lewy margines elementu.
maxHeight Określ maksymalną wysokość elementu.
minHeight Określ minimalną wysokość elementu.
maxWidth Określ maksymalną szerokość elementu.
minWidth Określ minimalną szerokość elementu.
opacity Określa przezroczystość elementu.
padding Ustawia wypełnienie na wszystkich czterech bokach elementu.
paddingTop Ustawia wypełnienie górnej części elementu.
paddingRight Ustawia wypełnienie po prawej stronie elementu.
paddingBottom Ustawia wypełnienie dolnej części elementu.
paddingLeft Ustawia wypełnienie po lewej stronie elementu.
perspective Określenie erspektywy wyświetlania elementów 3D.
perspectiveOrigin Określenie dolnej erspektywy wyświetlania elementów 3D.
textAlign Ustawia poziome wyrównanie zawartości wbudowanej.
textShadow Stosuje jeden lub więcej cieni do zawartości tekstowej elementu.
textTransform Przekształca wielkość liter w tekście.
transform Stosuje transformację 2D lub 3D do elementu.
transition Definiuje przejście między dwoma stanami elementu.
visibility Określa, czy element jest widoczny.
width Określ szerokość elementu.
wordSpacing Ustawia odstępy między słowami.


animation

<!DOCTYPE html>
<html>
<head>
<style>
#animationX {
  width: 80px;
  height: 80px;
  background: Lime;
  position: relative;
}
@keyframes mymove01 {
  from {left: 0px;}
  to {left: 800px;}
}
@keyframes mymove02 {
  from {top: 0px;}
  to {top: 100px;}
}
</style>
</head>
<body>
<button onclick="animation01()">start01</button>
<button onclick="animation02()">start02</button><br />
<p id="animationX">Koko dżambo</p>

<script>
function animation01() {
    document.getElementById("animationX").style.animation = "mymove01 5s infinite alternate";
}
function animation02() {
    document.getElementById("animationX").style.animation = "mymove02 5s 2";
}
</script>
</body>
</html>
wynik skryptu

Koko dżambo



animationPlayState

<!DOCTYPE html>
<html>
<head>
<style>
#animationPlayStateX {
  width: 80px;
  height: 80px;
  background: SkyBlue;
  position: relative;
  animation: mymove03 5s infinite alternate;
  animation-play-state: paused;
}
@keyframes mymove03 {
  from {left: 0%;}
  to {left: 90%;}
}
</style>
</head>
<body>
<button onclick="animationPlayState01()">start</button>
<button onclick="animationPlayState02()">pauza</button><br />
<p id="animationPlayStateX">Koko dżambo</p>

<script>
function animationPlayState01() {
    document.getElementById("animationPlayStateX").style.animationPlayState = "running";
}
function animationPlayState02() {
    document.getElementById("animationPlayStateX").style.animationPlayState = "paused";
}
</script>
</body>
</html>
wynik skryptu

Koko dżambo



backgroundColor

<button onclick="backgroundColor01()">złoty kolor tła tekstu</button>
<button onclick="backgroundColor02()">usunięcie koloru tła tekstu</button><br />
<button onclick="backgroundColor03()">srebrny kolor tła strony</button>
<button onclick="backgroundColor04()">usunięcie koloru tła strony</button>
<p id="backgroundColorX">Koko dżambo i do przodu.</p>

<script>
function backgroundColor01() {
    document.getElementById("backgroundColorX").style.backgroundColor = "gold";
}
function backgroundColor02() {
    document.getElementById("backgroundColorX").style.backgroundColor = "";
}
function backgroundColor03() {
    document.body.style.backgroundColor = "silver";
}
function backgroundColor04() {
    document.body.style.backgroundColor = "";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



backgroundImage

<button onclick="backgroundImage01()">backgroundImage = "url('grafika/buzia01.png')"</button>
<button onclick="backgroundImage02()">backgroundImage = "url('none')"</button><br />
<p id="backgroundImageX" style="background-color: gold; width: 400px; height: 400px">Koko dżambo i do przodu.</p>

<script>
function backgroundImage01() {
    document.getElementById("backgroundImageX").style.backgroundImage = "url('grafika/buzia01.png')";
}
function backgroundImage02() {
    document.getElementById("backgroundImageX").style.backgroundImage = "url('none')";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



backgroundRepeat

<button onclick="backgroundRepeat01()">backgroundRepeat = "repeat"</button>
<button onclick="backgroundRepeat02()">backgroundRepeat = "repeat-x"</button>
<button onclick="backgroundRepeat03()">backgroundRepeat = "repeat-y"</button>
<button onclick="backgroundRepeat04()">backgroundRepeat = "no-repeat"</button><br />
<p id="backgroundRepeatX" style="background: gold url('grafika/buzia02.png'); width: 400px; height: 400px">Koko dżambo i do przodu.</p>

<script>
function backgroundRepeat01() {
    document.getElementById("backgroundRepeatX").style.backgroundRepeat = "repeat";
}
function backgroundRepeat02() {
    document.getElementById("backgroundRepeatX").style.backgroundRepeat = "repeat-x";
}
function backgroundRepeat03() {
    document.getElementById("backgroundRepeatX").style.backgroundRepeat = "repeat-y";
}
function backgroundRepeat04() {
    document.getElementById("backgroundRepeatX").style.backgroundRepeat = "no-repeat";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



border

<button onclick="border01()">border = "2px solid red"</button>
<button onclick="border02()">border = "10px solid orange"</button><br />
<p id="borderX">Koko dżambo i do przodu.</p>

<script>
function border01() {
    document.getElementById("borderX").style.border = "2px solid red";
}
function border02() {
    document.getElementById("borderX").style.border = "10px solid orange";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



borderTop

<button onclick="borderTop01()">borderTop = "2px solid red"</button>
<button onclick="borderTop02()">borderTop = "10px solid orange"</button><br />
<p id="borderTopX">Koko dżambo i do przodu.</p>

<script>
function borderTop01() {
    document.getElementById("borderTopX").style.borderTop = "2px solid red";
}
function borderTop02() {
    document.getElementById("borderTopX").style.borderTop = "10px solid orange";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



borderRight

<button onclick="borderRight01()">borderRight = "2px solid red"</button>
<button onclick="borderRight02()">borderRight = "10px solid orange"</button><br />
<p id="borderRightX">Koko dżambo i do przodu.</p>

<script>
function borderRight01() {
    document.getElementById("borderRightX").style.borderRight = "2px solid red";
}
function borderRight02() {
    document.getElementById("borderRightX").style.borderRight = "10px solid orange";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



borderBottom

<button onclick="borderBottom01()">borderBottom = "2px solid red"</button>
<button onclick="borderBottom02()">borderBottom = "10px solid orange"</button><br />
<p id="borderBottomX">Koko dżambo i do przodu.</p>

<script>
function borderBottom01() {
    document.getElementById("borderBottomX").style.borderBottom = "2px solid red";
}
function borderBottom02() {
    document.getElementById("borderBottomX").style.borderBottom = "10px solid orange";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



borderLeft

<button onclick="borderLeft01()">borderLeft = "2px solid red"</button>
<button onclick="borderLeft02()">borderLeft = "10px solid orange"</button><br />
<p id="borderLeftX">Koko dżambo i do przodu.</p>

<script>
function borderLeft01() {
    document.getElementById("borderLeftX").style.borderLeft = "2px solid red";
}
function borderLeft02() {
    document.getElementById("borderLeftX").style.borderLeft = "10px solid orange";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



color

<button onclick="color01()">czerwony kolor tekstu</button>
<button onclick="color02()">usunięcie koloru tekstu</button><br />
<p id="colorX">Koko dżambo i do przodu.</p>

<script>
function color01() {
    document.getElementById("colorX").style.color = "red";
}
function color02() {
    document.getElementById("colorX").style.color = "";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



columnCount

<button onclick="columnCount01()">columnCount = "2"</button>
<button onclick="columnCount02()">columnCount = "3"</button>
<button onclick="columnCount03()">columnCount = "4"</button><br />
<p id="columnCountX">Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

<script>
function columnCount01() {
    document.getElementById("columnCountX").style.columnCount = "2";
}
function columnCount02() {
    document.getElementById("columnCountX").style.columnCount = "3";
}
function columnCount03() {
    document.getElementById("columnCountX").style.columnCount = "4";
}
</script>
wynik skryptu

Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu.



columns

<button onclick="columns01()">columns = "120px 2"</button>
<button onclick="columns02()">columns = "120px 3"</button>
<button onclick="columns03()">columns = "120px 4"</button><br />
<p id="columnsX">Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

<script>
function columns01() {
    document.getElementById("columnsX").style.columns = "120px 2";
}
function columns02() {
    document.getElementById("columnsX").style.columns = "120px 3";
}
function columns03() {
    document.getElementById("columnsX").style.columns = "120px 4";
}
</script>
wynik skryptu

Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu.



font

<button onclick="font01()">font = "normal 2em Arial"</button>
<button onclick="font02()">font = "bold 20px Verdana"</button><br />
<p id="fontX">Koko dżambo i do przodu.</p>

<script>
function font01() {
    document.getElementById("fontX").style.font = "normal 2em Arial";
}
function font02() {
    document.getElementById("fontX").style.font = "bold 20px Verdana";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



fontSize

<button onclick="fontSize01()">fontSize = "16px"</button>
<button onclick="fontSize02()">fontSize = "32px"</button><br />
<p id="fontSizeX">Koko dżambo i do przodu.</p>

<script>
function fontSize01() {
    document.getElementById("fontSizeX").style.fontSize = "16px";
}
function fontSize02() {
    document.getElementById("fontSizeX").style.fontSize = "32px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



fontStyle

<button onclick="fontStyle01()">fontStyle = "normal"</button>
<button onclick="fontStyle02()">fontStyle = "italic"</button>
<button onclick="fontStyle03()">fontStyle = "oblique"</button><br />
<p id="fontStyleX">Koko dżambo i do przodu.</p>

<script>
function fontStyle01() {
    document.getElementById("fontStyleX").style.fontStyle = "normal";
}
function fontStyle02() {
    document.getElementById("fontStyleX").style.fontStyle = "italic";
}
function fontStyle03() {
    document.getElementById("fontStyleX").style.fontStyle = "oblique";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



height

<button onclick="height01()">height = "20px"</button>
<button onclick="height02()">height = "50px"</button><br />
<p id="heightX" style="background-color: gold; width: 220px;">Koko dżambo i do przodu.</p>

<script>
function height01() {
    document.getElementById("heightX").style.height = "20px";
}
function height02() {
    document.getElementById("heightX").style.height = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



justifyContent

<!DOCTYPE html>
<html>
<head>
<style>
#justifyContentX {
  width: 500px;
  height: 80px;
  border: 2px solid black;
  display: flex;
}
#justifyContentX div {
  width: 80px;
  height: 80px;
}
</style>
</head>
<body>
<button onclick="justifyContent01()">justifyContent = "flex-start"</button>
<button onclick="justifyContent02()">justifyContent = "flex-end"</button>
<button onclick="justifyContent03()">justifyContent = "center"</button>
<button onclick="justifyContent04()">justifyContent = "space-around"</button>
<button onclick="justifyContent05()">justifyContent = "space-between"</button><br />
<div id="justifyContentX">
    <div style="background-color: LightSkyBlue;"></div>
    <div style="background-color: DeepSkyBlue;"></div>
    <div style="background-color: RoyalBlue;"></div>
    <div style="background-color: Blue;"></div>
</div>

<script>
function justifyContent01() {
    document.getElementById("justifyContentX").style.justifyContent = "flex-start";
}
function justifyContent02() {
    document.getElementById("justifyContentX").style.justifyContent = "flex-end";
}
function justifyContent03() {
    document.getElementById("justifyContentX").style.justifyContent = "center";
}
function justifyContent04() {
    document.getElementById("justifyContentX").style.justifyContent = "space-around";
}
function justifyContent05() {
    document.getElementById("justifyContentX").style.justifyContent = "space-between";
}
</script>
</body>
</html>
wynik skryptu



letterSpacing

<button onclick="letterSpacing01()">letterSpacing = "1px"</button>
<button onclick="letterSpacing02()">letterSpacing = "10px"</button><br />
<p id="letterSpacingX">Koko dżambo i do przodu.</p>

<script>
function letterSpacing01() {
    document.getElementById("letterSpacingX").style.letterSpacing = "1px";
}
function letterSpacing02() {
    document.getElementById("letterSpacingX").style.letterSpacing = "10px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



lineHeight

<button onclick="lineHeight01()">lineHeight = "1"</button>
<button onclick="lineHeight02()">lineHeight = "2"</button><br />
<div id="lineHeightX">
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
</div>

<script>
function lineHeight01() {
    document.getElementById("lineHeightX").style.lineHeight = "1";
}
function lineHeight02() {
    document.getElementById("lineHeightX").style.lineHeight = "2";
}
</script>
wynik skryptu

Koko dżambo i do przodu.

Koko dżambo i do przodu.

Koko dżambo i do przodu.



margin

<button onclick="margin01()">margin = "5px 5px 5px 5px"</button>
<button onclick="margin02()">margin = "50px 50px 50px 50px"</button><br />
<p id="marginX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function margin01(){
    document.getElementById("marginX").style.margin = "5px 5px 5px 5px";
}
function margin02(){
    document.getElementById("marginX").style.margin = "50px 50px 50px 50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



marginTop

<button onclick="marginTop01()">marginTop = "5px"</button>
<button onclick="marginTop02()">marginTop = "50px"</button><br />
<p id="marginTopX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function marginTop01(){
    document.getElementById("marginTopX").style.marginTop = "5px";
}
function marginTop02(){
    document.getElementById("marginTopX").style.marginTop = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



marginRight

<button onclick="marginRight01()">marginRight = "5px"</button>
<button onclick="marginRight02()">marginRight = "50px"</button><br />
<p id="marginRightX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function marginRight01(){
    document.getElementById("marginRightX").style.marginRight = "5px";
}
function marginRight02(){
    document.getElementById("marginRightX").style.marginRight = "50px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.



marginBottom

<button onclick="marginBottom01()">marginBottom = "5px"</button>
<button onclick="marginBottom02()">marginBottom = "50px"</button><br />
<p id="marginBottomX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function marginBottom01(){
    document.getElementById("marginBottomX").style.marginBottom = "5px";
}
function marginBottom02(){
    document.getElementById("marginBottomX").style.marginBottom = "50px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.



marginLeft

<button onclick="marginLeft01()">marginLeft = "5px"</button>
<button onclick="marginLeft02()">marginLeft = "50px"</button><br />
<p id="marginLeftX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function marginLeft01(){
    document.getElementById("marginLeftX").style.marginLeft = "5px";
}
function marginLeft02(){
    document.getElementById("marginLeftX").style.marginLeft = "50px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.



maxHeight

<button onclick="maxHeight01()">maxHeight = "100px"</button>
<button onclick="maxHeight02()">maxHeight = "300px"</button><br />
<div id="maxHeightX" style="width: 400px; background-color: yellow; overflow: auto;">
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
</div>

<script>
function maxHeight01(){
    document.getElementById("maxHeightX").style.maxHeight = "100px";
}
function maxHeight02(){
    document.getElementById("maxHeightX").style.maxHeight = "300px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.

Koko dżambo i do przodu.

Koko dżambo i do przodu.

Koko dżambo i do przodu.



minHeight

<button onclick="minHeight01()">minHeight = "100px"</button>
<button onclick="minHeight02()">minHeight = "300px"</button><br />
<div id="minHeightX" style="width: 400px; background-color: yellow; overflow: auto;">
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
    <p>Koko dżambo i do przodu.</p>
</div>

<script>
function minHeight01(){
    document.getElementById("minHeightX").style.minHeight = "100px";
}
function minHeight02(){
    document.getElementById("minHeightX").style.minHeight = "300px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.

Koko dżambo i do przodu.

Koko dżambo i do przodu.

Koko dżambo i do przodu.



maxWidth

<button onclick="maxWidth01()">maxWidth = "100px"</button>
<button onclick="maxWidth02()">maxWidth = "300px"</button><br />
<p id="maxWidthX" style="background-color: gold">Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu.</p>

<script>
function maxWidth01(){
    document.getElementById("maxWidthX").style.maxWidth = "100px";
}
function maxWidth02(){
    document.getElementById("maxWidthX").style.maxWidth = "300px";
}
</script>
wynik skryptu


Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu.



minWidth

<button onclick="minWidth01()">minWidth = "100px"</button>
<button onclick="minWidth02()">minWidth = "300px"</button><br />
<p id="minWidthX" style="background-color: gold; width: 200px">Koko dżambo i do przodu.</p>

<script>
function minWidth01(){
    document.getElementById("minWidthX").style.minWidth = "100px";
}
function minWidth02(){
    document.getElementById("minWidthX").style.minWidth = "300px";
}
</script>
wynik skryptu


Koko dżambo i do przodu.



opacity

<button onclick="opacity01()">opacity = "0%"</button>
<button onclick="opacity02()">opacity = "25%"</button>
<button onclick="opacity03()">opacity = "50%"</button>
<button onclick="opacity04()">opacity = "75%"</button>
<button onclick="opacity05()">opacity = "100%"</button>
<br />
<p id="opacityX" style="background-color: orange; height: 100px; width: 400px;">Koko dżambo i do przodu.</p>

<script>
function opacity01(){
    document.getElementById("opacityX").style.opacity = "0%";
}
function opacity02(){
    document.getElementById("opacityX").style.opacity = "25%";
}
function opacity03(){
    document.getElementById("opacityX").style.opacity = "50%";
}
function opacity04(){
    document.getElementById("opacityX").style.opacity = "75%";
}
function opacity05(){
    document.getElementById("opacityX").style.opacity = "100%";
}
</script>
wynik skryptu


Koko dżambo i do przodu.



padding

<button onclick="padding01()">padding = "5px 5px 5px 5px"</button>
<button onclick="padding02()">padding = "50px 50px 50px 50px"</button><br />
<p id="paddingX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function padding01(){
    document.getElementById("paddingX").style.padding = "5px 5px 5px 5px";
}
function padding02(){
    document.getElementById("paddingX").style.padding = "50px 50px 50px 50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



paddingTop

<button onclick="paddingTop01()">paddingTop = "5px"</button>
<button onclick="paddingTop02()">paddingTop = "50px"</button><br />
<p id="paddingTopX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function paddingTop01(){
    document.getElementById("paddingTopX").style.paddingTop = "5px";
}
function paddingTop02(){
    document.getElementById("paddingTopX").style.paddingTop = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



paddingRight

<button onclick="paddingRight01()">padding = "5px"</button>
<button onclick="paddingRight02()">padding = "50px"</button><br />
<p id="paddingRightX" style="border: 2px solid orange; width: 200px;">Koko dżambo i do przodu.</p>

<script>
function paddingRight01(){
    document.getElementById("paddingRightX").style.paddingRight = "5px";
}
function paddingRight02(){
    document.getElementById("paddingRightX").style.paddingRight = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



paddingBottom

<button onclick="paddingBottom01()">paddingBottom = "5px"</button>
<button onclick="paddingBottom02()">paddingBottom = "50px"</button><br />
<p id="paddingBottomX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function paddingBottom01(){
    document.getElementById("paddingBottomX").style.paddingBottom = "5px";
}
function paddingBottom02(){
    document.getElementById("paddingBottomX").style.paddingBottom = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



paddingLeft

<button onclick="paddingLeft01()">paddingLeft = "5px"</button>
<button onclick="paddingLeft02()">paddingLeft = "50px"</button><br />
<p id="paddingLeftX" style="border: 2px solid orange">Koko dżambo i do przodu.</p>

<script>
function paddingLeft01(){
    document.getElementById("paddingLeftX").style.paddingLeft = "5px";
}
function paddingLeft02(){
    document.getElementById("paddingLeftX").style.paddingLeft = "50px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



perspective

<!DOCTYPE html>
<html>
<head>
<style>
#perspectiveX1 {
  width: 300px;
  height: 150px;
  margin: auto;
  padding: 10px;
  position: relative;
  border: 2px solid black;
  perspective: 200px;
}
#perspectiveX2 {
  border: 1px solid black;
  background-color: red;
  padding: 55px;
  position: absolute;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<button onclick="perspective01()">perspective = "60px"</button>
<button onclick="perspective02()">perspective = "100px"</button>
<button onclick="perspective03()">perspective = "140px"</button>
<button onclick="perspective04()">perspective = "none"</button><br />
<div id="perspectiveX1">
    <div id="perspectiveX2" style="background-color: LightSkyBlue;">Koko dżambo i do przodu.</div>
</div>

<script>
function perspective01() {
    document.getElementById("perspectiveX1").style.perspective = "60px";
}
function perspective02() {
    document.getElementById("perspectiveX1").style.perspective = "100px";
}
function perspective03() {
    document.getElementById("perspectiveX1").style.perspective = "140px";
}
function perspective04() {
    document.getElementById("perspectiveX1").style.perspective = "none";
}
</script>
</script>
</body>
</html>
wynik skryptu

Koko dżambo i do przodu.


perspectiveOrigin

<!DOCTYPE html>
<html>
<head>
<style>
#perspectiveOriginX1 {
  width: 300px;
  height: 150px;
  margin: auto;
  padding: 10px;
  position: relative;
  border: 2px solid black;
  perspective: 200px;
}
#perspectiveOriginX2 {
  border: 1px solid black;
  background-color: red;
  padding: 55px;
  position: absolute;
  transform: rotateX(45deg);
}
</style>
</head>
<body>
<button onclick="perspectiveOrigin01()">perspectiveOrigin = "10% 10%"</button>
<button onclick="perspectiveOrigin02()">perspectiveOrigin = "50% 10%"</button>
<button onclick="perspectiveOrigin03()">perspectiveOrigin = "90% 10%"</button><br />
<button onclick="perspectiveOrigin04()">perspectiveOrigin = "10% 50%"</button>
<button onclick="perspectiveOrigin05()">perspectiveOrigin = "50% 50%"</button>
<button onclick="perspectiveOrigin06()">perspectiveOrigin = "90% 50%"</button><br />
<button onclick="perspectiveOrigin07()">perspectiveOrigin = "10% 90%"</button>
<button onclick="perspectiveOrigin08()">perspectiveOrigin = "50% 90%"</button>
<button onclick="perspectiveOrigin09()">perspectiveOrigin = "90% 90%"</button><br />
<div id="perspectiveOriginX1">
    <div id="perspectiveOriginX2" style="background-color: LightGreen;">Koko dżambo i do przodu.</div>
</div>

<script>
function perspectiveOrigin01() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "10% 10%";
}
function perspectiveOrigin02() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "50% 10%";
}
function perspectiveOrigin03() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "90% 10%";
}
function perspectiveOrigin04() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "10% 50%";
}
function perspectiveOrigin05() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "50% 50%";
}
function perspectiveOrigin06() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "90% 50%";
}
function perspectiveOrigin07() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "10% 90%";
}
function perspectiveOrigin08() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "50% 90%";
}
function perspectiveOrigin09() {
    document.getElementById("perspectiveOriginX1").style.perspectiveOrigin = "90% 90%";
}
</script>
wynik skryptu



Koko dżambo i do przodu.


textAlign

<button onclick="textAlign01()">textAlign = "left";</button>
<button onclick="textAlign02()">textAlign = "center";</button>
<button onclick="textAlign03()">textAlign = "right";</button><br />
<p id="textAlignX">Koko dżambo i do przodu.</p>

<script>
function textAlign01(){
    document.getElementById("textAlignX").style.textAlign = "left";
}
function textAlign02(){
    document.getElementById("textAlignX").style.textAlign = "center";
}
function textAlign03(){
    document.getElementById("textAlignX").style.textAlign = "right";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



textShadow

<button onclick="textShadow01()">textShadow = "6px 6px 4px red"</button>
<button onclick="textShadow02()">textShadow = "-6px -6px 4px red"</button><br />
<p id="textShadowX">Koko dżambo i do przodu.</p>

<script>
function textShadow01(){
    document.getElementById("textShadowX").style.textShadow = "6px 6px 4px red";
}
function textShadow02(){
    document.getElementById("textShadowX").style.textShadow = "-6px -6px 4px red";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



textTransform

<button onclick="textTransform01()">textTransform = "none"</button>
<button onclick="textTransform02()">textTransform = "capitalize"</button>
<button onclick="textTransform03()">textTransform = "uppercase"</button>
<button onclick="textTransform04()">textTransform = "lowercase"</button><br />
<p id="textTransformX">Koko dżambo i do przodu.</p>

<script>
function textTransform01(){
    document.getElementById("textTransformX").style.textTransform = "none";
}
function textTransform02(){
    document.getElementById("textTransformX").style.textTransform = "capitalize";
}
function textTransform03(){
    document.getElementById("textTransformX").style.textTransform = "uppercase";
}
function textTransform04(){
    document.getElementById("textTransformX").style.textTransform = "lowercase";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



transform

<!DOCTYPE html>
<html>
<head>
<style>
#transformX {
  width: 250px;
  height: 100px;
  border: 2px solid black;
  margin: auto;
  color: black;
  background-color: GreenYellow;
}
</style>
</head>
<body>
<button onclick="transform01()">transform = "rotate(0.125turn)"</button>
<button onclick="transform02()">transform = "scale(0.5, 0.5)"</button>
<button onclick="transform03()">transform = "skew(15deg, 15deg)"</button>
<button onclick="transform04()">transform = "translate(150px, 50px)"</button>
<button onclick="transform05()">transform = "none"</button><br />
<div id="transformX">Koko dżambo i do przodu.</div>

<script>
function transform01(){
    document.getElementById("transformX").style.transform = "rotate(0.125turn)";
}
function transform02(){
    document.getElementById("transformX").style.transform = "scale(0.5, 0.5)";
}
function transform03(){
    document.getElementById("transformX").style.transform = "skew(15deg, 15deg)";
}
function transform04(){
    document.getElementById("transformX").style.transform = "translate(150px, 50px)";
}
function transform05(){
    document.getElementById("transformX").style.transform = "none";
}
</script>
</script>
</body>
</html>
wynik skryptu

Koko dżambo i do przodu.


transition

<!DOCTYPE html>
<html>
<head>
<style>
#transitionX {
  width: 100px;
  height: 100px;
  border: 2px solid Green;
  background-color: LightGreen;
  overflow: auto;
  transition: all 4s;
}
#transitionX:hover {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  background-color: Yellow;
  padding: 100px;
  transition: all 1s;
}
</style>
</head>
<body>
<button onclick="transition01()">transition = "all 10s"</button>
<button onclick="transition02()">transition = "all 20s"</button>
<button onclick="transition03()">transition = "all 20s"</button><br />
<p id="transitionX">Skieruj kursor na ten kwadrat.</p>

<script>
function transition01(){
    document.getElementById("transitionX").style.transition = "all 5s";
}
function transition02(){
    document.getElementById("transitionX").style.transition = "all 10s";
}
function transition03(){
    document.getElementById("transitionX").style.transition = "all 20s";
}
</script>
</body>
</html>
wynik skryptu

Skieruj kursor na ten kwadrat.



visibility

<button onclick="visibility01()">visibility = "visible"</button>
<button onclick="visibility02()">visibility = "hidden"</button><br />
<p id="visibilityX">Koko dżambo i do przodu.</p>

<script>
function visibility01(){
    document.getElementById("visibilityX").style.visibility = "visible";
}
function visibility02(){
    document.getElementById("visibilityX").style.visibility = "hidden";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



width

<button onclick="width01()">width = "100px"</button>
<button onclick="width02()">width = "400px"</button><br />
<p id="widthX" style="background-color: silver;">Koko dżambo i do przodu.</p>

<script>
function width01(){
    document.getElementById("widthX").style.width = "100px";
}
function width02(){
    document.getElementById("widthX").style.width = "400px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.



wordSpacing

<button onclick="wordSpacing01()">wordSpacing = "2px"</button>
<button onclick="wordSpacing02()">wordSpacing = "40px"</button><br />
<p id="wordSpacingX">Koko dżambo i do przodu.</p>

<script>
function wordSpacing01(){
    document.getElementById("wordSpacingX").style.wordSpacing = "2px";
}
function wordSpacing02(){
    document.getElementById("wordSpacingX").style.wordSpacing = "40px";
}
</script>
wynik skryptu

Koko dżambo i do przodu.