页面元素的显示方法、装置和电子设备制造方法及图纸

本发明专利技术提供了一种页面元素的显示方法、装置和电子设备，响应于指定事件被触发，确定目标元素的被依赖元素在页面内的第一显示区域；其中的目标元素和被依赖元素具有预设的相对位置关系；基于被依赖元素在页面内的第一显示区域，确定目标元素在页面内的第二显示区域；在第二显示区域显示目标元素。该方式中，目标元素在页面内的显示区域根据被依赖元素在页面内的显示区域确定，这种定位目标元素的方式，能够在页面发生变化时，根据被依赖元素的位置，在页面内确定目标元素的最佳显示区域，丰富了页面元素位置的确定方式，进而提高了页面显示效果。面显示效果。面显示效果。

【技术实现步骤摘要】
页面元素的显示方法、装置和电子设备


[0001]本专利技术涉及页面元素显示
，尤其是涉及一种页面元素的显示方法、装置和电子设备。

技术介绍

[0002]网页是构成网站的基本元素，需要通过网页浏览器显示网页中的DOM(Document Object Model，文档对象模型)元素；在网页的开发过程中，通常需要对各个元素进行元素定位，将目标元素精确的定位在页面的指定位置。相关技术中，通过CSS(Cascading Style Sheets，层叠样式表)技术设置元素的position属性，或者通过javaScript技术均可实现元素在页面中的定位。通常，可以采用上述技术基于当前元素的父元素的位置确定当前元素的位置，或者基于浏览器边框确定当前元素的位置。这些确定元素位置的方式较为单一，影响了页面显示效果。

技术实现思路

[0003]有鉴于此，本专利技术的目的在于提供一种页面元素的显示方法、装置和电子设备，以丰富页面元素位置的确定方式，使页面元素显示在页面内的最佳显示区域，进而提高页面显示效果。
[0004]第一方面，本专利技术实施例提供了一种页面元素的显示方法，方法包括：响应于指定事件被触发，确定目标元素的被依赖元素在页面内的第一显示区域；其中，目标元素和被依赖元素具有预设的相对位置关系；基于被依赖元素在页面内的第一显示区域，确定目标元素在页面内的第二显示区域；在第二显示区域显示目标元素。
[0005]进一步的，指定事件包括：作用于被依赖元素的点击事件、作用于被依赖元素的触发事件、页面区域变化事件，或者作用于页面的滚动事件。
[0006]进一步的，基于被依赖元素在页面内的第一显示区域，确定目标元素在页面内的第二显示区域的步骤，包括：获取第一显示区域的第一尺度信息和第一位置信息；根据第一尺度信息，以及目标元素的预设尺度信息，确定目标元素的目标尺度信息；根据第一位置信息，以及目标尺度信息，确定目标元素在页面内的第二显示区域。
[0007]进一步的，根据第一位置信息，以及目标尺度信息，确定目标元素在页面内的第二显示区域的步骤，包括：根据目标元素和被依赖元素预设的相对位置关系，获取被依赖元素到浏览器边框的中间距离；中间距离包括：被依赖元素顶部到浏览器顶部的第一距离和被依赖元素底部到浏览器底部的第二距离，或者被依赖元素左边缘到浏览器左边框的第三距离和被依赖元素右边缘到浏览器右边框的第四距离；根据中间距离、第一位置信息、以及目标尺度信息，确定目标元素在页面内的第二显示区域。
[0008]进一步的，根据中间距离、第一位置信息、以及目标尺度信息，确定目标元素在页面内的第二显示区域的步骤，包括：如果中间距离包括第一距离和第二距离，根据第一距离、第二距离、第一位置信息、目标尺度信息、以及第一尺度信息，确定目标元素到被依赖元
素的父元素顶部或底部的第一目标距离；根据第一位置信息，确定目标元素到被依赖元素的父元素左边或右边的第二目标距离；根据第一目标距离、第二目标距离、以及目标尺度信息，确定目标元素在页面内的第二显示区域。
[0009]进一步的，根据中间距离、第一位置信息、以及目标尺度信息，确定目标元素在页面内的第二显示区域的步骤，包括：如果中间距离包括第三距离和第四距离，根据第三距离、第四距离、第一位置信息、目标尺度信息，以及第一尺度信息，确定目标元素到被依赖元素的父元素左边或右边的第二目标距离；根据第一位置信息，确定目标元素到被依赖元素的父元素的顶部或底部的第一目标距离；根据第一目标距离、第二目标距离、以及目标尺度信息，确定目标元素在页面内的第二显示区域。
[0010]进一步的，第一位置信息包括被依赖元素顶部到被依赖元素的父元素顶部的第五距离；目标尺度信息包括目标元素的高；第一尺度信息包括被依赖元素的高；根据第一距离、第二距离、第一位置信息、目标尺度信息、以及第一尺度信息，确定目标元素到被依赖元素的父元素顶部的第一目标距离的步骤，包括：根据第一距离，第二距离，以及目标元素的高，确定目标元素与被依赖元素的相对位置关系；如果目标元素位于被依赖元素的下方，将第五距离，加上被依赖元素的高，加上预设的被依赖元素与目标元素之间的距离的和，确定为目标元素顶部到被依赖元素的父元素顶部的第一目标距离；如果目标元素位于被依赖元素的上方，将第五距离，减去目标元素的高，再减去预设的被依赖元素与目标元素之间的距离的差，确定为目标元素顶部到被依赖元素的父元素顶部的第一目标距离。
[0011]进一步的，根据第一距离，第二距离，以及目标元素的高，确定目标元素与被依赖元素的相对位置关系的步骤，包括：如果目标元素和被依赖元素预设的相对位置关系为，目标元素位于被依赖元素的下方，通过下述操作确定目标元素与被依赖元素的相对位置关系：如果第二距离大于或等于目标元素的高，或者，第二距离和第一距离均小于目标元素的高，且第二距离大于第一距离，确定目标元素位于被依赖元素的下方；如果第二距离小于目标元素的高，且第一距离大于目标元素的高，或者，第二距离和第一距离均小于目标元素的高，且第一距离大于第二距离，确定目标元素位于被依赖元素的上方。
[0012]进一步的，根据第一距离，第二距离，以及目标元素的高，确定目标元素与被依赖元素的相对位置关系的步骤，包括：如果目标元素和被依赖元素预设的相对位置关系为，目标元素位于被依赖元素的上方，通过下述操作确定目标元素与被依赖元素的相对位置关系：如果第一距离大于或等于目标元素的高，或者，第一距离和第二距离均小于目标元素的高，且第一距离大于第二距离，确定目标元素位于被依赖元素的上方；如果第一距离小于目标元素的高，且第二距离大于目标元素的高，或者，第一距离和第二距离均小于目标元素的高，且第二距离大于第一距离，确定目标元素位于被依赖元素的下方。
[0013]进一步的，第一位置信息包括被依赖元素左边缘到被依赖元素的父元素左边缘的第六距离；目标尺度信息包括目标元素的宽；第一尺度信息包括被依赖元素的宽；根据第三距离、第四距离、第一位置信息、目标尺度信息，以及第一尺度信息，确定目标元素到被依赖元素的父元素左边的第二目标距离的步骤，包括：根据第三距离，第四距离，以及目标元素的宽，确定目标元素与被依赖元素的相对位置关系；如果目标元素位于被依赖元素的右边，将第六距离，加上被依赖元素的宽，加上预设的被依赖元素与目标元素之间的距离的和，确定为目标元素左边缘到被依赖元素的父元素左边缘的第二目标距离；如果目标元素位于被
依赖元素的左方，将第六距离，减去目标元素的宽，再减去预设的被依赖元素与目标元素之间的距离的差，确定为目标元素左边缘到被依赖元素的父元素左边缘的第二目标距离。
[0014]进一步的，根据第三距离，第四距离，以及目标元素的宽，确定目标元素与被依赖元素的相对位置关系的步骤，包括：如果目标元素和被依赖元素预设的相对位置关系为，目标元素位于被依赖元素的左边，通过下述操作确定目标元素与被依赖元素的相对位置关系：如果第三距离大于或等于目标元素的宽，或者，第三距离和第四距离均小于目标元素的宽，且第三距离大于第四距本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面元素的显示方法，其特征在于，所述方法包括：响应于指定事件被触发，确定目标元素的被依赖元素在所述页面内的第一显示区域；其中，所述目标元素和所述被依赖元素具有预设的相对位置关系；基于所述被依赖元素在所述页面内的第一显示区域，确定所述目标元素在所述页面内的第二显示区域；在所述第二显示区域显示所述目标元素。2.根据权利要求1所述的方法，其特征在于，所述指定事件包括：作用于所述被依赖元素的点击事件、作用于所述被依赖元素的触发事件、页面区域变化事件，或者作用于所述页面的滚动事件。3.根据权利要求1所述的方法，其特征在于，基于所述被依赖元素在所述页面内的第一显示区域，确定所述目标元素在所述页面内的第二显示区域的步骤，包括：获取所述第一显示区域的第一尺度信息和第一位置信息；根据所述第一尺度信息，以及所述目标元素的预设尺度信息，确定所述目标元素的目标尺度信息；根据所述第一位置信息，以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域。4.根据权利要求3所述的方法，其特征在于，根据所述第一位置信息，以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域的步骤，包括：根据所述目标元素和所述被依赖元素预设的相对位置关系，获取所述被依赖元素到浏览器边框的中间距离；所述中间距离包括：所述被依赖元素顶部到所述浏览器顶部的第一距离和所述被依赖元素底部到所述浏览器底部的第二距离，或者所述被依赖元素左边缘到所述浏览器左边框的第三距离和所述被依赖元素右边缘到所述浏览器右边框的第四距离；根据所述中间距离、所述第一位置信息、以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域。5.根据权利要求4所述的方法，其特征在于，根据所述中间距离、所述第一位置信息、以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域的步骤，包括：如果所述中间距离包括所述第一距离和所述第二距离，根据所述第一距离、所述第二距离、所述第一位置信息、所述目标尺度信息、以及所述第一尺度信息，确定所述目标元素到所述被依赖元素的父元素顶部或底部的第一目标距离；根据所述第一位置信息，确定所述目标元素到所述被依赖元素的父元素左边或右边的第二目标距离；根据所述第一目标距离、所述第二目标距离、以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域。6.根据权利要求4所述的方法，其特征在于，根据所述中间距离、所述第一位置信息、以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域的步骤，包括：如果所述中间距离包括所述第三距离和所述第四距离，根据所述第三距离、所述第四距离、所述第一位置信息、所述目标尺度信息，以及所述第一尺度信息，确定所述目标元素到所述被依赖元素的父元素左边或右边的第二目标距离；根据所述第一位置信息，确定所述目标元素到所述被依赖元素的父元素的顶部或底部的第一目标距离；
根据所述第一目标距离、所述第二目标距离、以及所述目标尺度信息，确定所述目标元素在所述页面内的第二显示区域。7.根据权利要求5所述的方法，其特征在于，所述第一位置信息包括所述被依赖元素顶部到所述被依赖元素的父元素顶部的第五距离；所述目标尺度信息包括所述目标元素的高；所述第一尺度信息包括所述被依赖元素的高；根据所述第一距离、所述第二距离、所述第一位置信息、所述目标尺度信息、以及所述第一尺度信息，确定所述目标元素到所述被依赖元素的父元素顶部的第一目标距离的步骤，包括：根据所述第一距离，所述第二距离，以及所述目标元素的高，确定所述目标元素与所述被依赖元素的相对位置关系；如果所述目标元素位于所述被依赖元素的下方，将所述第五距离，加上所述被依赖元素的高，加上预设的所述被依赖元素与所述目标元素之间的距离的和，确定为目标元素顶部到所述被依赖元素的父元素顶部的第一目标距离；如果所述目标元素位于所述被依赖元素的上方，将所述第五距离，减去所述目标元素的高，再减去预设的所述被依赖元素与所述目标元素之间的距离的差，确定为目标元素顶部到所述被依赖元素的父元素顶部的第一目标距离。8.根据权利要求7所述的方法，其特征在于，根据所述第一距离，所述第二距离，以及所述目标元素的高，确定所述目标元素与所述被依赖元素的相对位置关系的步骤，包括：如果所述目标元素和所述被依赖元素预设的相对位置关系为，所述目标元素位于所述被依赖元素的下方，通过下述操作确定所述目标元素与所述被依赖元素的相对位置关系：如果所述第二距离大于或等于所述目标元素的高，或者，所述第二距离和所述第一距离均小于所述目标元素的高，且所述第二距离大于所述第一距离，确定所述目标元素位于所述被依赖元素的下方；如果所述第二距离小于所述目标元素的高，且所述第一距离大于所述目标元素的高，或者，所述第二距离和所述第一距离均小于所述目标元素的高，且所述第一距离大于所述第二距离，确定所述目标元素位于所述被依赖元素的上方。9.根据权利要求7所述的方法，其特征在于，根据所述第一距离，所述第二距离，以及所述目标元素的高，确定所述目标元素与所述被依赖元素的相对位置关系的步骤，包括：如果所述目标元素和所述被依赖元素预设的相对位置关系为，所述目标元素位于所述被依赖元素的上方，通过下述操作确定所述目标元素与所述被依赖元素的相对位置关系：如果所述第一距离大于...

【专利技术属性】
技术研发人员：房文静，
申请(专利权)人：北京金山云网络技术有限公司，
类型：发明
国别省市：