La différence entre font-weight et fontWeight en JavaScript

Aujourd'hui, j'ai découvert comment définir le style CSS d'un élément via JS. Le code est le suivant :

var js = document.getElementById('test-p');
js.style['font-weight'] = 'bold';

Ensuite, j'ai découvert un endroit très étrange. . Nous pouvons utiliser

console.log(js.style.fontWeight);
console.log(js.style['font-weight']);
console.log(js.style['fontWeight']);

pour définir le gras avant la sortie de la console, ou nous définissons js.style.fontWeight = 'bold' avant même si nous définissons {font-weight directement dans CSS: bold} ; Vous pouvez également utiliser les trois méthodes ci-dessus pour afficher le jeu en gras sur la console.

Si l'attribut 'font-weight' n'est pas trouvé dans l'objet généré par console.log(js.style); uniquement 'fontWeight', dites-moi pourquoi, pourquoi avons-nous 'font-weight' et « fontWeight » semblera être « équivalent ». Les débutants ont dit qu'ils étaient complètement confus. Merci pour vos réponses.

En JS, "-" représente l'opérateur de soustraction. Ainsi, font-weight représente la police moins le poids, et test-p équivaut à test moins p.

C'est le cas camel
js.style.font-weight Si vous l'écrivez directement comme ça, ce sera faux
Soit l'écrivez en cas camel
js.style. .fontWeight

ou style ['property']

En tant que script de navigateur, javascript doit naturellement être capable de manipuler des éléments tels que les CSS

Il y a un problème ici : beaucoup propriétés de l'utilisation du CSS - comme numéro de connexion, et en javascript, les objets Il ne doit jamais y avoir de signe moins dans l'attribut

Alors, l'astucieux auteur a eu un éclair d'inspiration : pourquoi ne pas utiliser camel case nommer pour accéder aux attributs CSS dans js, afin que cela n'ait pas l'air trop frustrant

À partir de maintenant, lorsque vous accédez aux propriétés CSS, vous pouvez soit utiliser la dénomination en casse chameau, soit utiliser des signes moins pour connecter les noms

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!