Tengo otra pregunta a la que no encontré respuesta. Estoy tratando de mostrar la identificación de cada div en mi sitio para visualizar el anidamiento. Este es mi código hasta ahora:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="frame"> <div id="header"> <div id="navigation"></div> </div> <div id="mainContent"> <div id="sidebarLeft"> <div id="calendar"></div> </div> <div id="article"></div> <div id="sidebarRight"></div> </div> <div id="footer"> <div id="siteInfo"></div> </div> </div> </body> <style> #frame { display: flex; flex-direction: column; height: 100vh; } #mainContent { flex: 1; background: blue; } #header { height: 64px; background: red; } #header::after{ content:"#header"; color: white; } #footer { height: 64px; background: green; } div[id]{border: 1px solid red; padding: 5px;} </style> </html>¿Cómo podría usar javascript aquí para escribir la identificación de divs en los divs css-after-content de cada div, como lo hice por mano en el #header-div?
Podría simplemente usar css content: attr(id) .
#frame { display: flex; flex-direction: column; height: 100vh; } #mainContent { flex: 1; background: blue; } #header { height: 64px; background: red; } /* #header::after{ content:"#header"; color: white; } */ #footer { height: 64px; background: green; } /* div[id]{border: 1px solid red; padding: 5px;} */ /*REM: Show id*/ div[id]::after{ background: lime; content: '#' '' attr(id); color: white } /*REM: Show class*/ div[class]:not(id)::after{ background: aqua; content: '.' '' attr(class); color: white } <div id="frame"> <div id="header"> <div id="navigation"></div> </div> <div id="mainContent"> <div id="sidebarLeft"> <div id="calendar"></div> </div> <div id="article"></div> <div id="sidebarRight"></div> </div> <div id="footer"> <div id="siteInfo"></div> <div class="siteClass"></div> </div> </div>No hay una forma directa de hacer esto, pero hay dos formas de hacerlo
data-my-id="header" en css del elemento posterior use content: attr(data-my-id) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="frame" data-my-id="frame"> <div id="header" data-my-id="header"> <div id="navigation" data-my-id="navigation"></div> </div> <div id="mainContent" data-my-id="mainContent"> <div id="sidebarLeft" data-my-id="sidebarLeft"> <div id="calendar" data-my-id="calendar"></div> </div> <div id="article" data-my-id="article"></div> <div id="sidebarRight" data-my-id="sidebarRight"></div> </div> <div id="footer" data-my-id="footer"> <div id="siteInfo" data-my-id="siteInfo"></div> </div> </div> </body> <style> #frame { display: flex; flex-direction: column; height: 100vh; } #mainContent { flex: 1; background: blue; } #header { height: 64px; background: red; } /* #header::after { content: "#header"; color: white; } */ #footer { height: 64px; background: green; } div[id] { border: 1px solid red; padding: 5px; } div[id]::after { content: attr(data-my-id); background-color: white; color: black; font-family: Arial, Helvetica, sans-serif; padding: 2px 4px; border: 1px solid black; display: inline-block; width: max-content; } </style> </html>