element.setAttribute ('style', 'attribute: value;') vs element.attribute = 'valeur'

Le seul changement que j'ai vu, c'est avec la toile. Mais, alors, étant donné un élément quelle est la différence entre

element.width = '100px'
element.style.width = '100px'
element.setAttribute('width','100px')
element.style.setAttribute('width','100px')

Puisque je n'ai pas trouvé la réponse d'un expert, seulement par expérience, je dirai ceci.

largeur est une propriété exposée de l'élément, comme dans un objet voiture.couleur='rouge'; setAttribute('color','red') est une fonction qui attribue la valeur d'une propriété
dans car = {color:'red',setAttribue:function(prop,val){this[prop]=val;}
Considéré comme un prototype de fonction serait

function element(){
   this.color='blue' //default
   this.setAttribute = function(prop, val){ this[prop]=val;}
}
car = new element()

car.color = 'red';
or
car.setAttribute('color','red');

Maintenant, le style est un cas particulier, où disons, est la façon dont les choses sont affichés dans une manière transformée,
pas de son origine. Un style ne changera pas le bien lui-même et qui est l'effet
vous voyez maintenant dans la toile, comme il était avant dans les images qui ont trop une largeur hauteur de la valeur

Comment est-ce? imaginez que vous avez une figure de 100x100 pixels d'origine, la figure de la balise
aurait paramètres pour hauteur largeur 100x100px, (même avec de la toile), puis
par style vous modifiez la largeur la hauteur de 200x200px la même image va croître pour s'adapter à la
nouvelle taille, sera amplifié, mais l'image elle-même alambics 100x100

Ok, vous pouvez le tester si vous être à l'aise avec l'explication

ont une image

<image id='f' src='whateveritis' width=100 height=100>

Le voir? est 100x100px

Maintenant ajouter un style

 style='width:200px'

<image id='f' style='width:200px' src='whateveritis' width=100 height=100>

Le voir? maintenant, il est amplifié

Maintenant obtenir ses attributs

f = document.getElementById('f');

alert(f.width) //you get 200px

alert(f.getAttribute('width')) //you get 100px

Donc n'oubliez pas de travailler avec des images, de la toile d'un tout, n'est pas la taille de base dans les styles, mais dans les attributs

La taille par défaut d'un div ou tout ce qui est zéro

ensuite, vous pouvez régler sa taille de styles, mais la taille en fait rester 0x0px

Mais la plupart du temps les programmes de travail basé sur des valeurs d'attributs,
pas dans les styles valeurs.

Et, il y a une autre mesure, mais seront vos devoirs

Alors qu'est-ce que le f.scroolWidth, et f.scrollHeight si c'est le même que
la largeur et la hauteur (lorsqu'il n'est pas le défilement de cours).

Un dernier point à prendre en compte
Même quand j'ai l'exemple avec la voiture, c'est différent avec des éléments
depuis la propriété, la couleur est caché, mais accessible à des styles
C'est la seule propriété d'un élément est celui que vous écrivez
direct dans le code html de la balise de code ou celui que vous avez défini avec setAttribute
parce que même si vous modifiez

élément.la largeur est d'un style n'est pas l'attribut lui-même

donc la seule façon de vraiment changer sa valeur sera

élément.setAttribute('width', x )

Je n'ai pas lu moi-même et trouvé une autre question que vous pourriez avoir
vous pensez peut-être, j'ai quitté la balise html avec 100x100 et c'est pourquoi je obtenir
l'alerte à 100 au lieu de 200

Bien, non ce n'est pas le cas

Vous pouvez tester trop pour ça, ne changez pas la balise comme il est

commande a f.setAttribute('width','300');

puis

alert(f.width) //you get 200px

alert(f.getAttribute('width')) //you get 300px

dans JQuery est la même, la seule commande pour modifier l'attribut $().attr

$().largeur et $().css il suffit de changer le style de

Enfin

Est-il important?

Oui, c'est parce que même si, pour des images et de la toile de travailler avec l'Attribut de ne pas le
style, celui qui prend effet visuel est le style n'est pas l'attribut
Ce est, vous pouvez définir le format de l'original à 200x200 et ce sera 200x200
mais si vous modifiez par le style de 300x300 l'image sera de 300
à partir de là, peu importe si vous définissez l'attribut de 1000x1000, l'image sera toujours
être considéré comme 300x300
Mais par exemple, pour une toile de programme de l'image, c'est de travailler sur un 1000x1000 taille.