KTV预订微信小程序_javascript获取元素的核算样式

  • 栏目:行业动态 时间:2021-01-07 13:31 分享新闻到:
<返回列表

javascript获取元素的计算样式       在做html页面开发时,经常会使用到js(javascript)来处理客户端的逻辑,下面我们就来看一下,如何使用js来获取页面上的元素

使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。

行内样式(内联样式)即写在html标签中的style属性中,如 div /div 内嵌样式即写在style标签中,例如 style type="text/css" div{width:100px; height:100px} /style 链接式即为用link标签引入css文件,例如 link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" / 导入式即为用import引入css文件,("test.css")

如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过style属性是不能获取到元素的完整样式信息的。因此,需要使用元素的计算样式才获取元素的样式信息。

获取计算样式

元素的style下的属性,默认为空字符串;

获取计算后的样式(非行间样式):
getComputedStyle(element).属性

获取到的结果为 带单位的字符串 ,如 :100px;

写法: getComputedStyle(box).height;

获取宽高(尺寸)
ele.clientHeight/Width 支持padding,不包含边框,元素可视区宽度; ele.offsetWidth/Height 包含padding、border
以上2个,如果设置一个固定值,就以固定值为依据显示,不会以被内容撑开显示; ele.scrollWidth/Height被内容撑开的高度(不包含边框);
无论是否设置固定样式,都以被内容撑开我显示结果; 边框尺寸
offsetTop  当前元素(上外边框)到定位父级的(上内边框)距离;
获取的是不带单位的数字。

在此了解以下渲染帧:
渲染帧是指浏览器一次完整绘制过程,帧之间的时间间隔是DOM视图更新的最小间隔。 由于主流的屏幕刷新率都在60hz,因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。

封装绝对位置

// 使用边框、定位位置
 class Tools {
 position(ele){ 
 let left = 0;
 let top = 0;
 let obj = ele;
 while(obj){
 // t = 当前元素的外边距 + 当前元素边框
 left += obj.offsetLeft + obj.clientLeft;
 top += obj.offsetTop + obj.clientTop;
 //重新设置Obj是谁,让obj变为当前的定位父级
 obj = obj.offsetParent; //box3 - box2 - box1 - 
 left -= ele.clientLeft; //多加一次box3的border,所以要减去
 top -= ele.clientTop;
 return {
 left,
 let t1 = new Tools;
 console.log(t1.position(box3).top);

返回顶部的小例子

 style 
 margin:0;
 padding:0;
#box{
 width:100px;
 height:50px;
 font-size:20px;
 text-align: center;
 line-height: 50px;
 color:#fff;
 background: red;
 cursor: pointer;
 position:fixed;
 bottom:0;
 right:0;
 display: none;
body,html{
 height:3000px;
 /style 
 /head 
 body 
 div id="box" 返回顶部 /div 
 script 
 window.onscroll = function(){
 // console.log(window.pageYOffset);
 if(window.pageYOffset = 600){
 box.style.display = 'block';
 }else{
 box.style.display = 'none';
 let timer = null;
 box.onclick = function(){
 let t = window.pageYOffset;
 timer = setInterval(() = {
 t-=100;
 if(t = 0){
 t = 0;
 clearInterval(timer);
 window.scrollTo(0,t);
 }, 16.7);
 /script 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

KTV预订微信小程序_javascript获取元素的核

行业动态 2021-01-07
javascript获得原素的测算款式 在做html网页页面开发设计时,常常会应用到js(javascript)来...
查看全文

广州凡科互联网科技股份有限公司招聘销

行业动态 2021-01-06
招聘人数:14职位信息岗位职责:1、负责部门所有客户资料的建档和管理工作;2、每月末前统...
查看全文

97金点子小程序_基于openlayers完成角度测量

行业动态 2021-01-05
根据openlayers完成视角精确测量作用 本文关键为大伙儿详尽详细介绍了根据openlayers完成视...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号