0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<blockquote><p>Meow! I came up with a new format: the article is long, and the settings are flexible. Help program everything before our competitors get on to what we are doing!</p>
1
<blockquote><p>Meow! I came up with a new format: the article is long, and the settings are flexible. Help program everything before our competitors get on to what we are doing!</p>
2
</blockquote><p>The editors of the news portal that we worked on in <a>previous chapters</a>are now publishing not just short news stories, but also long articles. In order to make them more convenient to read, users should have the ability to change the text font size and color as well as the background color in these articles.</p>
2
</blockquote><p>The editors of the news portal that we worked on in <a>previous chapters</a>are now publishing not just short news stories, but also long articles. In order to make them more convenient to read, users should have the ability to change the text font size and color as well as the background color in these articles.</p>
3
<p>We will work with the individual article page. The upper part of the page contains the settings: two dropdown lists allowing the user to select a color, and a slider. The dropdown lists are responsible for setting the font color and the article background color. The slider controls the text font size. When a user selects a new value from the list or moves the slider, the layout of the article should change.</p>
3
<p>We will work with the individual article page. The upper part of the page contains the settings: two dropdown lists allowing the user to select a color, and a slider. The dropdown lists are responsible for setting the font color and the article background color. The slider controls the text font size. When a user selects a new value from the list or moves the slider, the layout of the article should change.</p>
4
<p>Font color: Background color:</p>
4
<p>Font color: Background color:</p>
5
<p>Font size (14px)</p>
5
<p>Font size (14px)</p>
6
<p>We previously used classes to change the appearance of an element. But this approach is not suitable for this problem. There are too many colors in the lists and positions of the slider. In order to properly account for all of the options, we would have to create 76 classes. There is another solution: change the element styles directly.</p>
6
<p>We previously used classes to change the appearance of an element. But this approach is not suitable for this problem. There are too many colors in the lists and positions of the slider. In order to properly account for all of the options, we would have to create 76 classes. There is another solution: change the element styles directly.</p>
7
<p>You can use the style property to manage element styles. After it (after the dot) indicate the CSS property that needs to be changed.</p>
7
<p>You can use the style property to manage element styles. After it (after the dot) indicate the CSS property that needs to be changed.</p>
8
element.style.CSSproperty<p>In order to change the style of an element, the specified property needs to be assigned a new value. For example:</p>
8
element.style.CSSproperty<p>In order to change the style of an element, the specified property needs to be assigned a new value. For example:</p>
9
let element = document.querySelector('p'); // Assign green font color for the paragraph element.style.color = 'green';<p>Styles that are defined using the style property work in the same way as if they were specified in the markup in the style<a>attribute</a>of the element itself. They have a higher priority than CSS rules from a stylesheet.</p>
9
let element = document.querySelector('p'); // Assign green font color for the paragraph element.style.color = 'green';<p>Styles that are defined using the style property work in the same way as if they were specified in the markup in the style<a>attribute</a>of the element itself. They have a higher priority than CSS rules from a stylesheet.</p>
10
<p>So, when should you use classes, and when should you use the style property? Use style only in those cases when it becomes unwieldy to solve the problem using classes because of the number of classes involved.</p>
10
<p>So, when should you use classes, and when should you use the style property? Use style only in those cases when it becomes unwieldy to solve the problem using classes because of the number of classes involved.</p>
11
<p>We will change the styles of an individual article page on the news site. This is an element with the longread class. Let’s find it and write it to the variable. In order to check how the style property works, change the font color in the article to violet.</p>
11
<p>We will change the styles of an individual article page on the news site. This is an element with the longread class. Let’s find it and write it to the variable. In order to check how the style property works, change the font color in the article to violet.</p>