Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d58a236

Browse files
chapter 1 - 1.7 uploaded
chapter 1 - 1.7 uploaded
1 parent 3c58d5f commit d58a236

File tree

1 file changed

+133
-1
lines changed

1 file changed

+133
-1
lines changed

‎README.md

Lines changed: 133 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ Topics included/covered
6262
- 1.5. [Declaring CSS Variables](#15-declaring-css-variables) |
6363
[Using CSS Variables](#15-using-css-variables)
6464
- 1.6. [CSS Variables vs Preprocessor Variables](#16-css-variables-vs-preprocessor-variables) | [Difference Between CSS Variables and Preprocessor Variables](#16-difference-between-css-variables-and-preprocessor-variables)
65-
65+
- 1.7. [CSS Variables with JavaScript](#17-css-variables-with-javascript)
66+
6667
1 Introduction to CSS Variables Custom Properties
6768
=====================
6869

@@ -768,3 +769,134 @@ Variables are one of the major reasons why CSS preprocessors like `SASS` or `LES
768769
| One can easily access and overwrite CSS variables inside Media Query (as and when media or resolution changes the browser recheck/reassign/repaints the variable if needed | Sometimes it is not possible with preprocessor variables |
769770

770771
> **Note**: As Browser understands only CSS styling, the preprocessor code/variables would do nothing in a browser, The browser wouldn't understand the declarations and toss them out, that's the reason why Preprocessors files need to compile/converted into native CSS before sending/viewing into the browser
772+
773+
1.7. CSS Variables with JavaScript
774+
---------------------
775+
776+
- One more super cool thing you can do is access CSS variables directly from your JavaScript code
777+
- One of the important benefits of CSS Variables is that it can interact via the power of JavaScript
778+
- While dealing with CSS Variables JavaScript widely uses `getComputedStyle()` `getProperty()` and `style.setProperty()` methods
779+
780+
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
781+
```html
782+
<!DOCTYPE html>
783+
<html lang="en">
784+
785+
<head>
786+
787+
<meta charset="UTF-8">
788+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
789+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
790+
<title>1.7.1-css-variables-javascript-interaction.html</title>
791+
792+
<link rel="stylesheet" href="1.7.1-style-variables-javascript-interaction.css">
793+
794+
</head>
795+
796+
<body>
797+
798+
<div class="container">
799+
800+
<div class="sub-container">
801+
802+
<h1 class="top-heading-text" id="topHeadingText">Get and Set CSS variables values with JavaScript</h1>
803+
804+
<h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using CSS Variables</h1>
805+
806+
<p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>
807+
808+
<h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables</h2>
809+
810+
<ul>
811+
<li>List Item 1 - Define variables in any of root elements </li>
812+
<li>List Item 2 - Call variables for required ids/classes/elements</li>
813+
<li>List Item 3 - Verify variables properties reflect properly</li>
814+
</ul>
815+
816+
</div>
817+
818+
</div>
819+
820+
<script src="./1.7.1-script-variables-javascript-interaction.js"></script>
821+
822+
</body>
823+
824+
</html>
825+
```
826+
827+
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
828+
```css
829+
:root {
830+
--font-face: Arial;
831+
--base-bg-color: #66f969;
832+
--base-text-color: #327b34;
833+
--base-padding: 30px 10px;
834+
835+
--list-item-margin: 10px;
836+
--list-item-padding: 20px 10px;
837+
--list-item-corner-radius: 5px;
838+
}
839+
840+
body {
841+
font-family: var(--font-face);
842+
}
843+
844+
.top-heading-text {
845+
color: var(--base-text-color);
846+
}
847+
848+
.heading-text {
849+
background-color: var(--base-bg-color);
850+
color: var(--base-text-color);
851+
padding: var(--base-padding);
852+
}
853+
854+
.subheading-text {
855+
background-color: var(--base-bg-color);
856+
color: var(--base-text-color);
857+
padding: var(--base-padding);
858+
}
859+
860+
ul > li {
861+
color: var(--base-text-color);
862+
padding: var(--list-item-padding);
863+
border: 3px solid var(--base-bg-color);
864+
border-radius: var(--list-item-corner-radius);
865+
margin: var(--list-item-margin);
866+
}
867+
```
868+
869+
**Syntax & Example**: `1.7.1-css-variables-javascript-interaction.html`
870+
```js
871+
console.log('in 1.7.1-script-variables-javascript-interaction.js');
872+
873+
// get the root element
874+
var root = document.querySelector(':root');
875+
//console.log('root', root);
876+
877+
// get all the styles/CSSStyleDeclaration for root
878+
var rootStyles = getComputedStyle(root);
879+
console.log('rootStyles', rootStyles);
880+
881+
// get --base-bg-color variable value available inside root styles
882+
// var baseBgColor = rootStyles.getPropertyValue('--base-bg-color');
883+
// console.log('baseBgColor', baseBgColor);
884+
885+
root.style.setProperty('--base-bg-color', '#f66969') // red- #f66969; green - #66f969; blue- #6696f9;
886+
```
887+
888+
<p>
889+
<figure>
890+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.7.1.1-css-variables-javascript-interaction-original-green.png" alt="CSS variable interaction with JavaScript Original Green output" title="CSS variable interaction with JavaScript Original Green output" width="1000" border="2" />
891+
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.7.1.1 - CSS variable interaction with JavaScript Original Green output </figcaption>
892+
</figure>
893+
</p>
894+
895+
<hr/>
896+
897+
<p>
898+
<figure>
899+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/1.7.1.2-css-variables-javascript-interaction-set-red.png" alt="CSS variable interaction with JavaScript updated Red output" title="CSS variable interaction with JavaScript updated Red output" width="1000" border="2" />
900+
<figcaption>&nbsp;&nbsp;&nbsp; Image 1.7.1.2 - CSS variable interaction with JavaScript updated Red output </figcaption>
901+
</figure>
902+
</p>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /