Question Différence entre le code source et "inspect élément"


Je ne trouve pas d'élément de style spécifique dans mon code que j'ai pu modifier en utilisant l'éditeur de code dans Chrome et Firefox (firebug). Ce qui m'amène à ma question, pourquoi la source de vue est-elle si différente du code réel? Je sais que JQuery et Javascript y font quelque chose (en ajoutant des classes et des fichiers indésirables ...) parce que j'utilise le modal de l'interface utilisateur de JQuery, mais pourquoi ne puis-je pas trouver les éléments de style ??? Où sont-elles???

Code source:

<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">

De l'éditeur de code:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalEmail-ESI" style="display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalEmail-ESI">Email - ESI</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalEmail-ESI" class="infoModal ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 282px;" scrolltop="0" scrollleft="0">

Dans le code "inspect element", il y a un attribut de style width:800px; que je veux changer, mais je l'ai cherché dans le code et il est apparemment inexistant.

Cet attribut de style est-il généré dynamiquement?

METTRE À JOUR: Sur la base de vos commentaires, comment puis-je mettre à jour la largeur du courrier électronique lorsque l'attribut de style est dynamique?


14
2017-09-23 19:33


origine


Réponses:


Je suis d'accord avec Joe Enos, mais il y a d'autres choses qui pourraient en être la cause.

  1. Vous visualisez peut-être une source de courrier électronique, par exemple: gmail

    L'objet que vous visualisez est un email, ce que gmail modifie automatiquement les divs et en même temps ajoute peu d'autres classes ou identifiants pour s'assurer que leur interface utilisateur ne soit pas piratée ou cassée.

  2. Vous utilisez un lien vers d'autres fichiers CSS ou JS comme le mien. Ici: site Ceci est la mise en page du site pour mon site Web, que j'utilise comme code. Mais que se passe-t-il une fois qu'il est exécuté! Est presque opposé, ici: inspect  Dans l'élément inspect, vous pouvez voir qu'il y a beaucoup de classe ajoutée au code HTML, ce que nous n'avons jamais fait. D'où vient cela? Ses requêtes JS ou CSS @media ne me sont pas sûres. Mais cela vient de là, vous pouvez voir que j'ai lié beaucoup de fichiers JS et CSS.

Venir au point!

Ce que vous dites que le code source est tellement différent du code réel, vous vous trompez un peu. Parce que lorsque vous utilisez une fonction pour écrire pour supprimer la classe, vous savez réellement où vous appelez la fonction. Par exemple ceci:

function writeClass() {
 $('div').addClass('someword');
}

Et vous saurez toujours que cette classe a été ajoutée à cet élément lors du chargement de la page.

Sinon, le navigateur lui-même n'ajoute jamais rien au DOM.

Et oui, vous pouvez modifier les propriétés css dynamiquement. Utilisez ceci:

$('element').css('width', '800px');

Cette ligne remplace toute autre propriété CSS pour cet élément avec celle que vous fournissez. En d'autres termes, jQuery over écrit les propriétés DOM que vous obtenez du serveur.

Encore une chose:

Vous ne pouvez pas utiliser jQuery pour modifier définitivement les valeurs du fichier CSS, vous devez utiliser un langage côté serveur pour cela. jQuery peut modifier le contenu de la page Web une fois, lorsque la page se recharge, ils sont décalés.

J'espère que je suis proche du but! :) À votre santé,


2
2017-09-23 19:56



Quand vous dites "vue source", je suppose que vous parlez de l'éditeur, pas de la "Source de vue". Lorsque vous "visualisez la source" à partir du navigateur, vous obtenez le code HTML tel qu’il a été livré par le serveur, et non après que javascript ait agi.

Lorsque vous êtes dans l'éditeur de vos outils de développement, vous examinez le DOM tel qu'il existe actuellement, qui inclut des styles en ligne, des corrections d'analyse et d'autres éléments résultant de l'exécution de JavaScript.


18
2017-09-23 19:36



Il ne devrait y avoir aucune différence entre le "code réel" et la "source de vue", puisque ce dernier vous montre le premier.

La source différera de la vue dans un inspecteur DOM car cela montrera l'état actuel du DOM après:

  1. Récupération d'erreur du navigateur HTML
  2. Normalisation du navigateur HTML
  3. Manipulation du DOM via JavaScript

7
2017-09-23 19:36