Dans le processus de développement des affaires, sûrement nous avons souvent besoin de voir l'emplacement et la taille d'un élément et modifier son CSS, il utilisera fréquemment pour sélectionner des éléments dans la fonction DevTools
En fait, on peut utiliser une technique de CSS pour ajouter tous les éléments outline, afin que nous puissions comprendre rapidement les éléments de l'information de localisation dont ils ont besoin, pas besoin de voir l'élément sélectionné.
Nous avons juste besoin d'ajouter le CSS suivant sera en mesure d'ajouter cet effet à tout site Web
html * {
outline: 1px solid red
}
Notez que je n'ai pas utilisé cette raison que augmente la taille des éléments , mais non. borderborder outline
Grâce à cette technique non seulement nous aider à comprendre rapidement où la position de l'élément dans le développement, mais aussi nous aider à voir facilement la mise en page d'un site.
Mais le moment où les compétences dont nous avons besoin d'ajouter CSS pour réaliser manuellement, il est un peu insipide bits, peut être réalisé par un interrupteur sur une page pour désactiver cette fonction?
La réponse est oui, nous avons besoin d'utiliser la fonction de signet de Chrome.
-
Ouvrez la page de gestion des signets
-
coin supérieur droit des trois points « pour ajouter un nouveau signet. »
-
Nom au hasard, collez le code suivant dans l'URL
javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) {
items.push(elements[i]);
}
}
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
items[i].innerHTML = '';
}
} else {
document.body.innerHTML +=
'<style>html * { outline: 1px solid red }</style>';
}
})();
On peut alors cliquer sur le signet que vous venez de créer un site Web, il déterminera s'il y a un débogage interne . Supprimer Exists, n'existe pas d'ajouter, nous serons en mesure de visualiser facilement la mise en page d'une page de cette manière par cette technique. style