clientwidth:js获取屏幕以及元素宽高的方法

 2021-07-09 5:09    77  

clientwidth:js获取屏幕以及元素宽高的方法

一.window相关网页正文部分上clientwidth:window.screenTop 网页正文部分左:window.screenLeft屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft三.滚动相关scrollHeight: 获取对象的滚动高度。scrollWidth: 获取对象的滚动宽度 document.documentElement.scrollTop 垂直方向滚动的值 四.位置精确定位scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 五.坐标轴event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标六.width/clientWidth/offsetWidth以及height之间区别width是指可见内容的宽height是指可见内容的高clientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + border点击【右上角,关注 子瑜说IT 】持续更新IT资讯以及web前端开发教学,感谢支持!

手把手教你用Echarts写一个大数据信息面板

这篇文章呢clientwidth,教大家如何使用Echarts实现一个大数据可视化可视面板。有兴趣的同学可以进来详细学习一下。

clientwidth:js获取屏幕以及元素宽高的方法

EChartsclientwidth,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender。

在我们前端开发中,越来越依靠它,使用它,它能直观的让客户看到他想看到的。ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

视频加载中...

ECharts有哪些特点?ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;ECharts 种类多,ECharts 实现简单,各类图形都有;相应的模板,还有丰富的 API 及文档说明,非常详细;ECharts 兼容性好,基于HTML5,有着良好的动画渲染效果。具体实现今天的课程我们来实现上述视频中的大数据可视化展示面板,先给大家看看图,如下图:

大数据展示面板

看着确实复杂,其实写起来更复杂,不过不要怕,既然干前端了,就得学会,迟早会用上,话不多说,我们一起来看看吧,到底是怎么实现的。

我们亲切的称为可视化项目

A:需要的技术CSS布局的相关知识点jQuery相关知识点掌握echarts的基本使用B:项目说明要完成这个项目,看看信息面板,就知道我们的面板布局肯定离不开DIV+CSS的知识,不过这作为前端肯定没问题,此外还用到了一些CSS3的知识点,还引入了一些图表的绘制,以及高级的地图数据可视化案例,主要用到了一些饼状图、柱状图、线形图、地图等等几类图表。

C:技术掌握div+css布局flex布局CSS3动画CSS3渐变CSS3边框图片原生JS+jQueryrem适配echarts基础使用后端Json数据接收D:Echarts基础使用1、下载引入(echarts.min.js)引入

2、准备一个具备(宽高的DOM)一般我们以浏览器窗口为容器,用jquery直接定义。

<div id="main"></div>3、初始化echarts实例

通过echarts.init实例化一个容器(内部返回),例如:

var myChart = echarts.init(document.getElementById('main'));4、指定图表的配置项和数据(根据文档提示例找到option),例如:

var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]};5、使用刚指定的配置项和数据显示图表,例如:

myChart.setOption(option);E:echarts基础配置你想使用那些功能,大家可自行去官方文档查看,下面我来说说主要的一些图标功能函数:

title:标题组件,包含主标题和副标题以及标题的一些CSS属性

legend:图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。

XAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

yAxis:直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

polar:极坐标系,可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。

演示代码:

var option = { xAxis: { type: 'category', data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '用户注册', data: [820, 932, 901, 934, 9222, 1330, 1320], type: 'line' }, { name: '用户数据', data: [820, 932, 600, 934, 1290, 1330, 1320], type: "bar", }], grid: { show: true, // top : 100 }, tooltip: { trigger: "axis" }, title: { text: '年度统计' }, color: ['red', 'yellow'], legend: { data: ['用户注册', '用户数据'] }};F:rem适配设计稿是1920px ,约定rem基准值为 24px (基准值html的font-size)。

【不同设配等比显示,例如320和375等设备】

[1024-1920]

那么:设备宽度与rem基准值比例为 80

结论:适配设备的时候保持80的比例即可。

将来:换算rem单位的时候,使用24px基准值即可。

/*不用媒体查询,需要查询区间,如果用JS可以实时监控大小*/

页面初始化,就需要一个基准值:

(function () { // 1、页面一加载就要知道页面宽度计算 var setFont = function () { // 因为要定义变量可能和别的变量相互冲突,污染,所有用自调用函数 var html = document.documentElement;// 获取html // 获取宽度 var width = html.clientWidth; // 判断 if (width < 1024) width = 1024 if (width > 1920) width = 1920 // 设置html的基准值 var fontSize = width / 80 + 'px'; // 设置给html html.style.fontSize = fontSize; } setFont(); // 2、页面改变的时候也需要设置 // 尺寸改变事件 window.onresize = function () { setFont(); } })();注意:书写CSS代码,让px转换rem单位,使用一个cscode插件 cssrem

vscode插件搜索cssrem,进行安装既可需要在设置中cssrem换算的时候使用80的比例// rem换算"cssrem.rootFontSize": 24,//【计算时的基准值】"cssrem.fixedDigits":// 3,【取三位小数】 1920设计稿,比例80,基准值24,计算式可能有小数,很多位,保留3为有效小数,不去除0,例如(0.333);

G:基础布局和动画整体布局和局部布局都是采用flex布局,跟平常切页面差不多,效果是采用JS写的效果,动画是采用CSS3进行写的。

因为代码比较多,放上去不合适,大家可关注私信我,我会挨个发送。

本文标签:手把手面板

原文链接:https://www.xgfox.com/bcrm/682.html

本文版权:如无特别标注,本站文章均为原创。