web-dev-qa-db-fra.com

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

En javascript, y a-t-il une différence entre l'utilisation

element.style.setAttribute('width', '150px');

et

element.style.width = '150px';

?

J'ai vu que les mots clés ne fonctionneraient pas avec la première méthode (comme this ), mais pour les attributs non-mots clés, y a-t-il une différence?

javascripthtmlinternet-explorersafari
21
rosscj2533

Les deux sont parfaitement valables. Pouvez-vous donner quelques exemples qui ne fonctionnent pas en second lieu? Êtes-vous conscient que les noms d'attributs doivent d'abord être camelcased? Par exemple. element.style.marginTop au lieu de incorrectement element.style.margin-top. Le trait d'union est à savoir un identifiant invalide en Javascript.

14
BalusC

Le seul changement que j'ai vu concerne 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, je dirai ceci seulement par expérience.

width est une propriété exposée de l'élément, comme dans un objet car.color = 'red'; setAttribute('color','red') est une fonction qui attribue la valeur à une propriété comme dans car = {color:'red',setAttribue:function(prop,val){this[prop]=val;} Vu 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, c'est comment les choses sont affichées d'une manière transformée, pas son original. Un style ne changera pas la propriété elle-même et c'est l'effet que vous voyez maintenant dans le canevas, comme c'était le cas auparavant dans les images qui ont trop une valeur de hauteur de largeur

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

Ok, vous pouvez tester ceci pour être à l'aise avec l'explication

avoir une image

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

Vous voyez? est 100x100px

Maintenant, ajoutez un style

 style='width:200px'

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

Le voir? maintenant c'est amplifié

Maintenant, récupérez ses attributs

f = document.getElementById('f');

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

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

N'oubliez pas de travailler avec des images, des toiles et un tout, ne basez pas la taille dans les styles, mais dans les attributs

La taille par défaut d'un div ou autre est zéro

alors vous pouvez définir sa taille par styles, mais la taille reste en fait 0x0px

Mais la plupart du temps, les programmes fonctionneront en fonction des valeurs d'attributs, pas des valeurs de styles.

Et, il y a une autre mesure, mais ce sera votre devoir

Alors quel est le f.scroolWidth, et f.scrollHeight s'il est identique à la largeur et à la hauteur (sans défilement bien sûr).

Un dernier point à prendre en compte Même quand j'ai fait l'exemple avec voiture, c'est différent avec les éléments puisque la propriété couleur est cachée mais accessible aux styles C'est, la seule propriété réelle d'un élément est celle que vous écrivez directement dans le html code de balise ou celui que vous définissez avec setAttribute car même si vous modifiez

element.width est un style et non l'attribut lui-même

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

element.setAttribute ('largeur', x)

J'ai lu cela moi-même et j'ai trouvé une autre question que vous pourriez vous poser, j'ai laissé la balise html avec 100x100 et c'est pourquoi j'obtiens l'alerte avec 100 au lieu de 200

Eh bien, ce n'est pas le cas

Vous pouvez aussi tester pour cela, ne changez pas le tag tel quel

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

puis

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

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

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

$ (). widht et $ (). css changent simplement le style

Finalement

Est-ce important?

Oui, c'est parce que même lorsque pour les images et le canevas travaillent avec l'attribut pas le style, celui qui prend l'effet visuel est le style pas l'attribut C'est, vous pouvez définir la taille d'origine à 200x200 et ce sera 200x200 mais si vous changez de style en 300x300 l'image sera de 300 à partir de là, peu importe si vous définissez son attribut sur 1000x1000, l'image sera toujours considérée comme 300x300 Mais par exemple, pour un programme de canevas, l'image sur laquelle il travaille est une taille de 1000x1000 .

11
Avenida Gez