bonnebulle/__html_css_js
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

0_intro

Browse Source
This commit is contained in:
vincent_b
2025-10-17 00:18:16 +02:00
parent a9c8ef66db
commit 1c1f514531
28 changed files with 1422 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/script_html_infos.js
View File

@@ -8,10 +8,8 @@ infoBox.innerHTML = `
</label>
</div>
<div id="info-content">
<div><strong>Élément :</strong> <span id="element-tag"></span></div>
<div><strong>ID :</strong> <span id="element-id"></span></div>
<div><strong>Classe(s) :</strong> <span id="element-class"></span></div>
<div><strong>Parent :</strong> <span id="element-parent"></span></div>
<div><strong>Enfant :</strong> <span id="element-info"></span></div>
</div>
`;
@@ -76,9 +74,6 @@ style.textContent = `
#info-content.hidden {
display: none;
}
#toggle-display {
cursor: pointer;
}
`;
// Injection dans le DOM
@@ -86,9 +81,7 @@ document.head.appendChild(style);
document.body.appendChild(infoBox);
// Récupération des éléments d'affichage
const elementTag = document.getElementById('element-tag');
const elementId = document.getElementById('element-id');
const elementClass = document.getElementById('element-class');
const elementInfo = document.getElementById('element-info');
const elementParent = document.getElementById('element-parent');
const toggleCheckbox = document.getElementById('toggle-display');
const infoContent = document.getElementById('info-content');
@@ -134,15 +127,38 @@ document.addEventListener('mouseover', function(e) {
// Récupérer les informations
const tag = el.tagName.toLowerCase();
const id = el.id || '(aucun)';
const classes = el.className || '(aucune)';
const parent = el.parentElement ? el.parentElement.tagName.toLowerCase() : '(aucun)';
const id = el.id;
const classes = el.className;
// Construire la chaîne au format element#id.class
let infoStr = tag;
if (id) {
infoStr += '#' + id;
}
if (classes) {
// Remplacer les espaces par des points pour les classes multiples
infoStr += '.' + classes.trim().replace(/\s+/g, '.');
}
// Construire la chaîne parent au format element#id.class
let parentStr = '(aucun)';
if (el.parentElement) {
const parentTag = el.parentElement.tagName.toLowerCase();
const parentId = el.parentElement.id;
const parentClasses = el.parentElement.className;
parentStr = parentTag;
if (parentId) {
parentStr += '#' + parentId;
}
if (parentClasses) {
parentStr += '.' + parentClasses.trim().replace(/\s+/g, '.');
}
}
// Afficher les informations
elementTag.textContent = tag;
elementId.textContent = id;
elementClass.textContent = classes;
elementParent.textContent = parent;
elementInfo.textContent = infoStr;
elementParent.textContent = parentStr;
// Rendre la boîte visible
infoBox.classList.add('visible');