Explication détaillée du modèle de boîte en js

Le modèle de boîte 1.js

fait référence à l'obtention des styles d'éléments sur la page via une série de propriétés et de méthodes fournies dans js Information valeur

Exemple :

#box possède de nombreuses propriétés privées qui lui sont propres :

<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>

En ce qui concerne le modèle de boîte, la première chose à laquelle tout le monde pensera est le modèle de boîte CSS. Le modèle de boîte JS fait référence à l'obtention de la valeur des informations de style des éléments de la page via une série de propriétés et de méthodes fournies dans. JS.

Pour un #div (qui possède de nombreuses propriétés privées qui lui sont propres) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype-> Node .prototype->EventTarget.prototype->Object.prototype

Voici quelques méthodes JS

1. série client (Plusieurs attributs privés de l'élément actuel)

　La largeur et la hauteur du contenu : les styles largeur/hauteur que nous définissons sont le contenu . Largeur et hauteur, si la valeur de hauteur n'est pas définie, la hauteur du conteneur s'adaptera en fonction du contenu à l'intérieur, de sorte que la valeur obtenue soit la hauteur du contenu réel si la hauteur est définie sur une valeur fixe ; peu importe s'il y a plus ou moins de contenu, en fait nous La hauteur du contenu se réfère à la valeur définie.

La largeur et la hauteur du contenu réel : il s'agit de la largeur et de la hauteur du contenu réel (pas nécessairement liées à la hauteur que nous définissons), par exemple Par exemple, j'ai défini La hauteur est de 200 pixels. Si le contenu déborde, alors la hauteur du contenu réel doit ajouter la hauteur du contenu de débordement

　clientWidth/clientHeight<.> largeur/hauteur du contenu + remplissage gauche/droite/haut et bas (rien à voir avec le débordement de contenu)

　clientLeft:La largeur de la bordure gauche clientTop :La largeur de la bordure supérieure Hauteur (border[Left/Top]Width)

2. >offsetWidth/offsetHeight :

clientWidth/clientHeight + bordures gauche et droite/haut et bas (cela n'a rien à voir avec le débordement du contenu)

　

offsetParent : la référence parent de l'élément courant

　

offsetLeft/offsetTop : le décalage de l'élément courant Le décalage de la bordure par rapport à la bordure intérieure de l'objet de référence parent 3. série de défilement

　

scrollWidth/scrollHeight : exactement le même que notre clientWidth/clientHeight (à condition : le contenu du conteneur ne déborde pas) Si le contenu du conteneur déborde, les résultats que nous obtenons sont les suivants

　

scrollWidth  : La largeur du contenu réel (y compris le débordement) + remplissage gauche

　 scrollHeigh : La hauteur du contenu réel (y compris le débordement) + Remplir le haut Les résultats obtenus sont tous approximativement égaux à la valeur, car : dans le même navigateur, que l'on définisse overflow="hidden" a un impact sur le résultat final ; les résultats obtenus dans les différents navigateurs sont également différents.

　scrollLeft/scrollTop : La largeur et la hauteur de la barre de défilement

　

2. Problèmes liés aux valeurs d'attribut du modèle de boîte JS

　　我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；

三、关于操作浏览器本身的盒子模型信息

　　clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）

　　scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）

　　我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套

　　document.documentElement[attr] || document.body[attr];

　　必须document.documentElement在前

　　例如document.documentElement.clientWidth ||  document.body.clientWidth

　　设置也需要写两套

　　编写一个有关于操作浏览器盒子模型的方法 ，代码如下　

//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
            }//设置document.documentElement[attr] = value;
            document.body[attr] = value
        }

　　

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!