Viewing: learn.javascript.ru

, JavaScript, . , , .

, :

CSS : <div class="...">
style: <div style="...">.

JavaScript , style.

style. style , .

, style , JavaScript:

          let top = /*   */;
let left = /*   */;

elem.style.left = left; // , '123px',      
elem.style.top = top; // , '456px'
        

, cssText. , . , :

          let top = /*   */;
let left = /*   */;

//    elem,  =
elem.style.cssText = `
  top: ${top};
  left: ${left};
`;

//       elem,  +=
elem.style.cssText += `
  top: ${top};
  left: ${left};
`;

//     ,     (+=),
//     .
        

, , , CSS (JavaScript ). .

className classList

- JavaScript : "class" . , elem.class.

"className": elem.className "class".

<body class="main page">
  <script>
    alert(document.body.className); // main page
  </script>
</body>

- elem.className, . , , / .

: elem.classList.

elem.classList / .

<body class="main page">
  <script>
    //  
    document.body.classList.add('article');

    alert(document.body.className); // main page article
  </script>
</body>

, className, , classList. , .

classList:

elem.classList.add/remove("class") / .
elem.classList.toggle("class") , , .
elem.classList.contains("class") , true/false.

, classList , for..of:

<body class="main page">
  <script>
    for (let name of document.body.classList) {
      alert(name); // main,  page
    }
  </script>
</body>

style

elem.style , , "style".

, :

          background  => elem.style.background
top         => elem.style.top
opacity     => elem.style.opacity
        

camelCase:

          background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth
        

document.body.style.backgroundColor = prompt('background color?', 'green');

, , -moz-border-radius, -webkit-border-radius : .

          button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px';
        

, , , .

, , elem.style.display = "none".

style.display, . delete elem.style.display : elem.style.display = "".

//     , <body> ""
document.body.style.display = "none"; // 

setTimeout(() => document.body.style.display = "", 1000); //

style.display , CSS- , style.display .

, 10px, 10 elem.style.top. :

<body>
  <script>
    //  !
    document.body.style.margin = 20;
    alert(document.body.style.margin); // '' ( ,  )

    //     (px) -  
    document.body.style.margin = '20px';
    alert(document.body.style.margin); // 20px

    alert(document.body.style.marginTop); // 20px
    alert(document.body.style.marginLeft); // 20px
  </script>
</body>

, , style.margin style.marginLeft style.marginTop .

: getComputedStyle

, . ?

, , , . ?

style "style", CSS-.

, elem.style, , CSS.

, style :

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

   
  <script>
    alert(document.body.style.color); // 
    alert(document.body.style.marginTop); // 
  </script>
</body>

, , , 20px? .

: getComputedStyle.

getComputedStyle(element, [pseudo])

element: ,
pseudo: , , ::before. .

, elem.style, CSS-.

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    //       

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

CSS:

(computed) , CSS- CSS-. , height:1em font-size:125%.
(resolved) . 1em 125% . , , height:20px font-size:16px. , , width:50.5px.

- getComputedStyle , , , .

, getComputedStyle , .

. : paddingLeft, marginTop, borderTopWidth. : padding, margin, border .

, paddingLeft/paddingTop, getComputedStyle(elem).padding? , , , ? .

:visited.

getComputedStyle , , , .

JavaScript , :visited. , CSS , :visited CSS-, . , , , , .

DOM-:

className , .
classList add/remove/toggle/contains, .

style camelCase. , "style". , important .
style.cssText "style", .

( , CSS ) :

getComputedStyle(elem, [pseudo]) , style. .

showNotification(options), : <div class="notification"> . 1,5 .

options:

          //     "Hello"      .
showNotification({
  top: 10, // 10px     (  0px)
  right: 10, // 10px     (  0px)
  html: "Hello!", // HTML-
  className: "welcome" //    div ()
});
        

CSS- . .