JavaScript DOM CSS

痛定思痛。 2023-03-05 09:47 24阅读 0赞

Here, we'll use the **DOM to change CSS styles dynamically of a webpage**. As a prerequisite, you must **know what DOM is**, **what are DOM elements** and how we get a reference to them? I suggest you go through **HTML DOM and DOM Elements** article in case you're unfamiliar with the topics.

在这里，我们将使用**DOM来动态更改网页CSS样式** 。 作为前提条件，您必须**知道什么是DOM** ， **什么是DOM元素**以及我们如何获得对它们的引用？ 如果您不熟悉主题，建议您阅读**HTML DOM和DOM Elements**文章。

We know that **DOM** allows us to capture the **DOM elements using CSS Selectors** and we can change the content on the web page. However, interestingly we can also change the CSS styles of DOM elements dynamically using DOM manipulation.

我们知道**DOM**允许我们**使用CSS选择器**捕获**DOM元素，**并且我们可以更改网页上的内容。 但是，有趣的是，我们还可以使用DOM操作动态更改DOM元素CSS样式。

Create an **"index.html"** file and paste the following code. We'll be using this as our HTML template.

创建一个**“ index.html”**文件并粘贴以下代码。 我们将使用它作为我们HTML模板。

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM CSS</title>
    </head>
    
    <body>
        <h1>DOM CSS</h1>
        <h3>Today we'll be using the DOM CSS to dynamically change styles</h3>
        <div class="container">
            <p>We'll be using the CSS Selectors for capturing DOM Elements</p>
            <span>This is the starter template</span>
        </div>
        <div class="content">
            <h3>Here is some lorem ipsum for you</h3>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor, porro. Explicabo necessitatibus neque illo provident consequatur. Cumque,earum delectus tempora neque illum pariatur autem dolorem nam doloribus ut ipsa expedita!</p>
        </div>
        <script>
        </script>
    </body>
    
    </html>

Now, let's add some basic styles. Create a **"styles.css"** file and hook it up with your "index.html"

Now add the following styles so that we have something to change,

**HTML Output**

![JavaScript DOM CSS][]

Alright. Now our page looks a bit colorful. Let's get a reference to all our **DOM Elements using the querySelector() method**.

Cool, now we have a reference to the title, our introduction text and our content div.

Let's first simply change the color of our title.

title.style.color = 'green';

**HTML Output**

Our **title just changed color!** You can also inspect it and see in the "styles.css" file on the developer tools that our h1 has a color of green assigned to it unlike earlier.

Let's try to increase the font-size of our "lorem ipsum".

content.style.fontSize = '44px';

**HTML Output**

Our **lorem ipsum text** just changed its size to **44px**. You now have a basic idea of **how to change CSS styles using DOM manipulation?** We can also add and remove classes. Let's do one more example,

You can see that our intro text has a class container that we have styled differently. We can remove this class using the following,

introText.classList.remove('container');

**HTML Output**

Now our styles for the container class are removed from the introText. This way we can remove CSS classes to change CSS styles of DOM elements. Let's add it back.

introText.classList.add('container');

**HTML Output**

And our styles are back again! Thus we can also add classes to change CSS styles of our DOM elements.

Alternately, we can simply write

introText.classList.toggle('container');

This will add the container class if not present and remove it if it's present already.

TOP Interview Coding Problems/Challenges

*  [Run-length encoding (find/print frequency of letters in a string)][Run-length encoding _find_print frequency of letters in a string]
 *  [Sort an array of 0's, 1's and 2's in linear time complexity][Sort an array of 0_s_ 1_s and 2_s in linear time complexity]
 *  [Checking Anagrams (check whether two string is anagrams or not)][Checking Anagrams _check whether two string is anagrams or not]
 *  [Relative sorting algorithm][]
 *  [Finding subarray with given sum][]
 *  [Find the level in a binary tree with given sum K][]
 *  [Check whether a Binary Tree is BST (Binary Search Tree) or not][Check whether a Binary Tree is BST _Binary Search Tree_ or not]
 *  [1\[0\]1 Pattern Count][1_0_1 Pattern Count]
 *  [Capitalize first and last letter of each word in a line][]
 *  [Print vertical sum of a binary tree][]
 *  [Print Boundary Sum of a Binary Tree][]
 *  [Reverse a single linked list][]
 *  [Greedy Strategy to solve major algorithm problems][]
 *  [Job sequencing problem][]
 *  [Root to leaf Path Sum][]
 *  [Exit Point in a Matrix][]
 *  [Find length of loop in a linked list][]
 *  [Toppers of Class][]
 *  [Print All Nodes that don't have Sibling][Print All Nodes that don_t have Sibling]
 *  [Transform to Sum Tree][]
 *  [Shortest Source to Destination Path][]

Comments and Discussions

**Ad:** Are you a blogger? Join our [Blogging forum][].

Please enable JavaScript to view the [comments powered by Disqus.][]

现在，让我们添加一些基本样式。 创建一个**“ styles.css”**文件，并将其与“ index.html”挂钩

现在添加以下样式，以便我们进行一些更改，

body {
        background : whitesmoke ;
    }
    
    h1 {
        margin : 5 px auto ;
        padding : 20 px ;
        color : brown ;
        font-family : ' Franklin Gothic Medium ' , ' Arial Narrow ' , Arial , sans-serif ;
        text-align : center ;
    }
    
    h3 {
        margin : 10 px auto ;
        padding : 10 px ;
        color : tomato ;
        font-family : ' Segoe UI ' , Tahoma , Geneva , Verdana , sans-serif ;
    }
    
    . container {
        text-align : center ;
        padding : 10 px ;
        background : rgba ( 255 , 255 , 0 , 0.212 ) ;
        border : 2 px solid saddlebrown ;
        font-family : ' Franklin Gothic Medium ' , ' Arial Narrow ' , Arial , sans-serif ;
    }
    
    . content p {
        color : blueviolet ;
        background : rgba ( 64 , 224 , 208 , 0.356 ) ;
        font-family : ' Franklin Gothic Medium ' , ' Arial Narrow ' , Arial , sans-serif ;
    }

**HTML输出**

好的。 现在我们的页面看起来有点丰富多彩。 让我们**使用querySelector()方法**获得对所有**DOM元素**的引用。

< script >
    	const title = document . querySelector ( ' h1 ' ) ;
    	const introText = document . querySelector ( ' .container ' ) ;
    	const content = document . querySelector ( ' .content p ' ) ;
    < / script >

很酷，现在我们可以参考标题 ，介绍文字和内容div 。

首先让我们简单地更改标题的颜色。

**HTML输出**

![JavaScript DOM CSS][JavaScript DOM CSS 1]

我们的**标题刚刚变色！** 您还可以对其进行检查，并在开发人员工具上的“ styles.css”文件中看到，我们的h1被分配了绿色，这与之前的情况不同。

让我们尝试增加“ lorem ipsum”的字体大小 。

**HTML输出**

![JavaScript DOM CSS][JavaScript DOM CSS 2]

我们的**lorem ipsum文本**刚刚将其大小更改为**44px** 。 您现在对**如何使用DOM操作更改CSS样式**有一个基本的**了解？** 我们还可以添加和删除类。 让我们再举一个例子

您可以看到我们的介绍文本具有一个样式不同的类容器。 我们可以使用以下方法删除此类，

**HTML输出**

![JavaScript DOM CSS][JavaScript DOM CSS 3]

现在，我们从introText中删除了容器类的样式 。 这样，我们可以删除CSS类来更改DOM元素CSS样式。 让我们重新添加。

**HTML输出**

![JavaScript DOM CSS][JavaScript DOM CSS 4]

我们的风格又回来了！ 因此，我们还可以添加类来更改DOM元素CSS样式。

或者，我们可以简单地写

如果不存在，它将添加容器类，如果已经存在，则将其删除。

最佳面试编码问题/挑战

*  [游程编码(字符串中字母的查找/打印频率)][Run-length encoding _find_print frequency of letters in a string]
 *  [以线性时间复杂度对0、1和2的数组进行排序][Sort an array of 0_s_ 1_s and 2_s in linear time complexity]
 *  [检查字谜(检查两个字符串是否是字谜)][Checking Anagrams _check whether two string is anagrams or not]
 *  [相对排序算法][Relative sorting algorithm]
 *  [查找给定总和的子数组][Finding subarray with given sum]
 *  [在给定总和K的二叉树中找到级别][Find the level in a binary tree with given sum K]
 *  [检查二叉树是否为BST(二叉搜索树)][Check whether a Binary Tree is BST _Binary Search Tree_ or not]
 *  [1 \[0\] 1个样式计数][1_0_1 Pattern Count]
 *  [大写一行中每个单词的第一个和最后一个字母][Capitalize first and last letter of each word in a line]
 *  [打印二叉树的垂直和][Print vertical sum of a binary tree]
 *  [打印二叉树的边界和][Print Boundary Sum of a Binary Tree]
 *  [反转单个链表][Reverse a single linked list]
 *  [解决主要算法问题的贪婪策略][Greedy Strategy to solve major algorithm problems]
 *  [工作排序问题][Job sequencing problem]
 *  [根到叶的路径总和][Root to leaf Path Sum]
 *  [矩阵中的出口点][Exit Point in a Matrix]
 *  [在链表中查找循环长度][Find length of loop in a linked list]
 *  [一流的礼帽][Toppers of Class]
 *  [打印所有没有兄弟的节点][Print All Nodes that don_t have Sibling]
 *  [转换为求和树][Transform to Sum Tree]
 *  [最短的源到目标路径][Shortest Source to Destination Path]

评论和讨论

**广告：**您是博主吗？ 加入我们的[Blogging论坛][Blogging forum] 。

请启用JavaScript以查看 [由Disqus提供][comments powered by Disqus.]的 [评论。][comments powered by Disqus.]

> 翻译自: [https://www.includehelp.com/code-snippets/javascript-dom-css.aspx][https_www.includehelp.com_code-snippets_javascript-dom-css.aspx]

[JavaScript DOM CSS]: /images/20230208/193efe5c5c85496bbc6b89dcdb8221e4.png
[Run-length encoding _find_print frequency of letters in a string]: https://www.includehelp.com/icp/run-length-encoding-print-frequency-of-letters-in-a-string.aspx
[Sort an array of 0_s_ 1_s and 2_s in linear time complexity]: https://www.includehelp.com/icp/sort-an-array-of-0s-1s-and-2s-in-linear-time-complexity.aspx
[Checking Anagrams _check whether two string is anagrams or not]: https://www.includehelp.com/icp/check-whether-two-string-is-anagrams-or-not.aspx
[Relative sorting algorithm]: https://www.includehelp.com/icp/relative-sorting.aspx
[Finding subarray with given sum]: https://www.includehelp.com/icp/finding-subarray-with-given-sum.aspx
[Find the level in a binary tree with given sum K]: https://www.includehelp.com/icp/find-the-level-in-a-binary-tree-with-given-sum-k.aspx
[Check whether a Binary Tree is BST _Binary Search Tree_ or not]: https://www.includehelp.com/icp/check-whether-a-binary-tree-is-bst-binary-search-tree-or-not.aspx
[1_0_1 Pattern Count]: https://www.includehelp.com/icp/101-pattern-count.aspx
[Capitalize first and last letter of each word in a line]: https://www.includehelp.com/icp/capitalize-first-and-last-letter-of-each-word-in-a-line.aspx
[Print vertical sum of a binary tree]: https://www.includehelp.com/icp/print-vertical-sum-of-a-binary-tree.aspx
[Print Boundary Sum of a Binary Tree]: https://www.includehelp.com/icp/print-boundary-sum-of-a-binary-tree.aspx
[Reverse a single linked list]: https://www.includehelp.com/icp/reverse-a-single-linked-list.aspx
[Greedy Strategy to solve major algorithm problems]: https://www.includehelp.com/icp/greedy-strategy-to-solve-major-algorithm-problems.aspx
[Job sequencing problem]: https://www.includehelp.com/icp/job-sequencing-problem.aspx
[Root to leaf Path Sum]: https://www.includehelp.com/icp/root-to-leaf-path-sum.aspx
[Exit Point in a Matrix]: https://www.includehelp.com/icp/exit-point-in-a-matrix.aspx
[Find length of loop in a linked list]: https://www.includehelp.com/icp/find-length-of-loop-in-a-linked-list.aspx
[Toppers of Class]: https://www.includehelp.com/icp/toppers-of-class.aspx
[Print All Nodes that don_t have Sibling]: https://www.includehelp.com/icp/print-all-nodes-that-dont-have-sibling.aspx
[Transform to Sum Tree]: https://www.includehelp.com/icp/transform-to-sum-tree.aspx
[Shortest Source to Destination Path]: https://www.includehelp.com/icp/shortest-source-to-destination-path.aspx
[Blogging forum]: https://help.gulshankumar.net/
[comments powered by Disqus.]: https://disqus.com/?ref_noscript
[JavaScript DOM CSS 1]: /images/20230208/f29007ad17484cd3937b755b00e132fe.png
[JavaScript DOM CSS 2]: /images/20230208/b8601de915fc43278c9932a789750ec4.png
[JavaScript DOM CSS 3]: https://www.includehelp.com/code-snippets/Images/js-dom-css-4.jpg
[JavaScript DOM CSS 4]: /images/20230208/0cad5abeee9643beaf3c2f34b22a00e5.png
[https_www.includehelp.com_code-snippets_javascript-dom-css.aspx]: https://www.includehelp.com/code-snippets/javascript-dom-css.aspx