如何使用 JavaScript 继承父元素的 CSS 属性?
javascriptweb developmentobject oriented programming
您可以将 classList.add() 与 append() 一起使用。使用 document.createElement() 创建一个新 div,然后 classList.add() 将添加 CSS 类。(.class 选择器)。
示例
<html lang="en> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .add-all-subject { display: grid; height: 100px; width: 100px; grid-template-columns: 2fr 2fr 2fr 2fr 2fr; grid-template-rows: 2fr; grid-column-gap: 5.9rem; grid-row-gap: 2rem; color: red; border: 2px solid red; } </style> </head> <body> <button onclick="saveAllSubjects()">Add Subjects</button> <div id="add-subject"> </div> <script> const addSubjectArea = document.getElementById("add-subject"); function saveAllSubjects() { const allSubject = document.createElement('div'); allSubject.classList.add('add-all-subject'); addSubjectArea.append(allSubject); } </script> </body> </html>
要运行上述程序,请将文件名保存为"anyName.html(index.html)",然后右键单击该文件。在 VS Code 编辑器中选择选项"使用 Live Server 打开"。
输出
将产生以下输出 −
单击按钮"添加主题"后,您将获得以下输出。
这将产生以下输出 −