Styles and Classes

Styles and Classes （样式和类别）

In this chapter, we are going to show you how to alter the DOM by modifying styles and classes. （在本章中，我们将向您展示如何通过修改样式和类来更改DOM。）

But, before getting into the JavaScript ways of modifying styles and classes let’s check out an important rule. In general, there exist two ways of styling an element:

Creating a class in CSS, as well as adding it <div class="…">. Writing properties directly into style: <div style="…">.

As it was mentioned above, JavaScript is also capable of modifying both style properties and classes. However, CSS is always preferable for styling. For instance, style can be acceptable in case you calculate coordinates of an element dynamically and wish to set them from JavaScript, as follows:

let top = /* complex calculations */ ;
let left = /* complex calculations */ ;

elem.style.left = left; // e.g '100px', calculated at run-time
elem.style.top = top; // e.g '400px'

For making the text blue, adding a background icon, you need to describe it in CSS, then add the class. It’s quite flexible and easier to support. （要使文本变为蓝色，添加背景图标，您需要在CSS中描述它，然后添加类。它非常灵活，更易于支持。）

Modifying Classes

Modifying Classes （修改类）

So, the style attribute corresponds to the style selectors of CSS. It is not to be confused with ES6 classes: a unique type of JavaScript function.

The CSS classes are used for applying styles to multiple elements, except ID that can only exist once a page. In JavaScript, there are className and classList properties for working with the class attribute. （CSS类用于将样式应用于多个元素，但ID只能存在一次页面。在JavaScript中，有className和classList属性用于处理class属性。）

className and classList

One of the most used actions in scripts is changing a class. Earlier there was a limitation in JavaScript: a reserved word, such as “class” couldn’t be considered an object property. Nowadays, there is no such limitation.So, the property “classname” was introduced: the elem.className matches the “class” attribute.

The example will look as follows:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
 </head>
 <body class="main classes">
   <script>
     alert(document.body.className); // main classes
   </script>
 </body>
</html>

In the event of assigning something to elem.className, it can replace the whole string of classes. Sometimes, it can be what you need, but, frequently, you may want to add or remove a single class. For that, you can use the property of elem.classList. The elem.classList is a unique object with methods of adding, removing or toggling a single class. For example:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
 </head>
 <body class="main classes">
   <script>
     // add a class
（添加class类）
     document.body.classList.add('classList');
     alert(document.body.className); // main classes classList
   </script>
 </body>
</html>

So, you can work both on the full class string using className or on individual classes with classList. You can choose it depending on your needs. （因此，您可以使用className处理完整的类字符串，也可以使用classList处理单个类。您可以根据需要选择。）

Let’s check out the methods of classList:

  • For adding or removing the class, the elem.classList.add/remove(“class”) method is used. （-对于添加或删除类，使用elem.classList.add/remove (“class”)方法。）

  • For adding the class that doesn’t exist, the elem.classList.toggle(“class”) method is used. If it already exists, with this method, you can remove it. （-对于添加不存在的类，使用elem.classList.toggle (“class”)方法。如果它已经存在，您可以使用此方法将其删除。）

  • The method elem.classList.contains(“class”) checks for a particular class, returning true or false. （-方法elem.classList.contains (“class”)检查特定类，返回true或false。）

Also, the classlist is iterable: you can list all classes with for..of, like here:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
 </head>
 <body class="main classes">
   <script>
     for(let name of document.body.classList) {
       alert(name); // main, and then classes
     }
   </script>
 </body>
</html>

Element Style

Element Style （元素风格）

The elem.style property is an object that matches with what is written in the “style” attribute. Setting elem.style.width=“100px is similar to having in the attribute style a string width:100px.

The camelCase is used for the multi-word property, as follows:

background-color => elem.style.backgroundColor （background-color = > elem.style.backgroundColor）

z-index => elem.style.zIndex （z-index = > elem.style.zIndex）

border-left-width => elem.style.borderLeftWidth （border-left-width = > elem.style.borderLeftWidth）

Here is an example of a multi-word property:

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

Resetting the Style Property

Resetting the Style Property （重置样式属性）

Sometimes, you need to assign a style property and then to remove it. For example, for hiding an element, you can set elem.style.display = “none”. （有时，需要分配样式属性，然后将其删除。例如，对于隐藏元素，您可以设置elem.style.display = “none”。）

Later, you may want to remove the style.display, as if you have never set it. So, instead of delete elem.style.display, an empty string should be assigned to it: elem.style.display = “”. Let’s check out an example:

// if we run this code, the <body> will blink
document.body.style.display = "none"; // hide
setTimeout(() => document.body.style.display = "", 2000); // back to normal

In case you set style.display to an empty string, the browser applies CSS classes, as well as its built-in styles regularly, as though there was no such style.display. （如果将style.display设置为空字符串，浏览器会定期应用CSS类及其内置样式，就好像没有这样的style.display一样。）

As a rule, you can use style.* for assigning individual style properties. It is not possible to set the whole style like div.style=“color: red; width: 200px”, as div.style is considered an object and is read-only.

A particular property, such as style.cssText, is used for setting a full style as a string, like this:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
 </head>
 <body>
   <div id="div">Box</div>
   <script>
     // we can set special style flags like "important" here
（//我们可以在这里设置特殊的样式标志，如“重要”）
     div.style.cssText = `color: red !important;
       background-color: yellow;
       width: 200px;
       text-align: center;
     `;
     alert(div.style.cssText);
   </script>
 </body>
</html>

Anyway, this property is rarely used. （无论如何，此房源很少被使用。）

Mind the Units

Mind the Units （当心单位）

It is essential to add CSS units to values. For example, you must not set elem.style.top to 20 but rather to 20px. In the opposite case, it will not work:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
 </head>
 <body>
   <script>
     // doesn't work!
（这不管用。）
     document.body.style.margin = 40;
     console.log(document.body.style.margin); // '' (empty string, the assignment is ignored)
     // now add the CSS unit (px) - and it works
（//现在添加CSS单元（ px ） -它有效）
     document.body.style.margin = '40px';
     alert(document.body.style.margin); // 40px      
     alert(document.body.style.marginTop); // 40px
     alert(document.body.style.marginLeft); // 40px
   </script>
 </body>
</html>

Please, take into account that the browser “unpacks” the style.margin property in the last lines, inferring style.marginLeft and style.marginTop from it. （请考虑浏览器在最后一行“解包” style.margin属性，从中推断style.marginLeft和style.marginTop。）

Computed styles: getComputedStyle

Computed styles: getComputedStyle

Let’s learn how to read the style. （让我们学习如何解读风格。）

Imagine, you want to know the size, the margins or the color of an element. Note that the style property can operate only on the value of the “style” attribute, without any CSS cascade. Hence, elem.style will not help to read anything coming from CSS classes. （想象一下，你想知道元素的大小、边距或颜色。 请注意， style属性只能对“style”属性的值进行操作，而无需任何CSS级联。 因此， elem.style不会帮助读取来自CSS类的任何内容。）

In the example below, style doesn’t see the margin:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     body {
       color: red;
       margin: 20px
     }
   </style>
 </head>
 <body>
   The red text
（红色文字）
   <script>
     alert(document.body.style.color); // empty
     alert(document.body.style.marginTop); // empty
   </script>
 </body>
</html>

But, in case you need to increase the margin by 40px, you will need the current value of it. For that purpose, you can use the getComputedStyle method. The syntax of the getComputedStyle method is the following: getComputedStyle(element, [pseudo]).

In the syntax above, the element is the element to read the value for. And, the pseudo is a pseudo-element if required ( for example, ::before). Either no argument or an empty string means the element itself.

The result will be an object with styles, such as elem.style, with respect to the overall CSS classes, like here:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the Document</title>
   <style>
     body {
       color: red;
       margin: 20px
     }
   </style>
 </head>
 <body>
   <script>
     let computedStyle = getComputedStyle(document.body);
     // now we can read the margin and the color from it      
（//现在我们可以从中读取边距和颜色）
     alert(computedStyle.marginTop); // 20px
     alert(computedStyle.color); // rgb(255, 0, 0)
   </script>
 </body>
</html>

Computed and Resolved Values

In CSS, there are two concepts:

The first one is a computed style value, which is the value after all CSS rules and CSS inheritance is applied, as the consequence of the CSS cascade. It may look like the following: height:1em or font-size:125%. The second one is the resolved style value: the one that is finally applied to the element. Values, such as 1em or 125% are similar to each other. The browser takes the computed value, making all the units fixed and absolute. For geometry properties, the resolved values can have a floating-point ( for example, width:50.5px).

Please, take into consideration that getComputedStyle requires the full property name. You need to always ask for the specific property you need (for instance, marginTop, paddingLeft orborderTopWidth). Otherwise, there are no guarantees to get the correct result. （请注意， getComputedStyle需要完整的属性名称。您需要始终询问所需的特定属性（例如marginTop、paddingLeft orborderTopWidth ）。否则，无法保证获得正确的结果。）

Summary

Summary （概要）

In brief, we can conclude that there are two DOM properties for managing classes:

  • className: that is a string value, good for managing the whole set of classes.

  • classList: that is the object with the methods add/remove/contains/toggle, used generally for individual classes.

  • The style property considered an object with camelCased sides. To read and to write to it is the same as modifying properties in the “style” attribute. （- style属性被视为具有camelCased边的对象。读取和写入它与修改“style”属性中的属性相同。）

  • The style.cssText property matches the whole “style”, the full string of styles. （- style.cssText属性匹配整个"style” ，即完整的样式字符串。）

  • The getComputedStyle(elem, [pseudo]) is targeted at returning the style-like object with them. （- getComputedStyle (elem, [pseudo])旨在返回带有它们的样式样式对象。）

← Modifying the document
Window Sizes and Scrolling →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部