js得到auto元素的高度

2024-09-05

【原】js获取height为auto的高度问题

今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完. 当我把高度由 auto 设置为固定值之后,又可以获取到该img的高度.可是我就是不想要固定的高度啊. 于是,度娘之,得到的答案是 var imgHeight=document.getElementById("img").offsetHeight; alert(imgHeight) //或者 var imgHeight=document.g

JS根据offsetHeight修改元素的高度

之前的博文: 测试了offsetHeight获取的是页面元素的高度,包裹该元素本身内容的高度,上下padding,上下border.这个获取的但是px,px是相对单位,受电脑分辨率的影响,用LODOP进行打印的时候,不建议使用px单位,建议使用pt.mm等绝对单位 .JS修改某元素的css样式,可查看本博客另一篇相关博文: .首先设置一个div,该div设置初始的样式,颜色,padding,margin和border.然后在代码里设置判断下元素的高度如果高度不超过190,则按照原来的样式显示如果

使用JS控制伪元素的几种方法

一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

js多个元素随机且不重叠分布在页面中

最近,公司要做一个类似挖矿的项目,大概其是当用户登录进入首页后,如果用户有已经生成的原力值,则在其点击原力值后可以类似蚂蚁森林那样收集原力值,当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中,待新的原力值生成后,用户可以继续以上的操作收集原力值.如下图: 以上是一种逻辑,还有一种是当用户前一天有剩余的原力值没有收集时,在第二天收集完当天的已生成的原力值后,前一天的原力值还可以出现在页面当中继续供用户收集(具体的情况,看你公司的实际业务需求,比如可以设置三天内的原力值都能收集,也可以

js 获取浏览器/网页宽度高度整理

网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: d

「jQuery」获取元素的高度

在jQuery中,获取元素高度的方法有3个:height().innerHeight().outerHeight(); 顺带记一下元素的盒模型: height(高度), padding(内边距), margin(外边距), border(边框); 1. height() 用于设置或返回当前匹配元素的高度: 高度不包括元素的外边距(margin).内边距(padding).边框(border)等: 对不可见的元素依然有效: 还可获取window,document对象的高度, $(window).h

使用js获取页面的各种高度

使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.scrollTop; 获取网页全文的高度——兼容写法: windowHeight = document.body.scrollHeight || document.documentElement.scrollHeight; 获取网页可视区域的高度——兼容写法: screenHeight = docum

如何改变 select 元素的高度

mozilla 对于美化 select 元素的样式有这样一段描述(用 CSS 美化 Select 元素): 众所周知,select 元素很难用 CSS 进行高效的设计.你可以影响任何元素的某些方面 - 例如,操纵框模型,显示的字体等,你可以使用 appearance 属性来删除默认的系统外观. 但是,这些属性不会在浏览器之间产生一致的结果,并且很难在列中将不同类型的表单元素相互排列. select 元素的内部结构复杂,难以控制. 如果你想获得完全控制,你应该考虑使用一个具有良好设施的库来构建窗体

【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？

正常情况如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float='left' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

JS获取各种宽度、高度的简单介绍：

JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧

JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); //获取页面的文档高度 $(document).height(); //获取页面的文档宽度 : $(document).width(); //浏览器当前窗口文档body的高度: $(document.body).height(); //浏览器当前窗口文档body的宽度: $(do

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

js改变HTML元素的值

js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p id="demo"> JavaScript 能改变 HTML 元素的内容. </p> <script> function myFunction() { x=document.getElementById("demo"

JS控制HTML元素的显示和隐藏

JS控制HTML元素的显示和隐藏利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible&

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

js获取网页的各种高度

原文:js获取网页的各种高度网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: d

js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChil

js判断一个元素是否在数组中

js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInArray(arr,value){ for(var i = 0; i < arr.length; i++){ if(value === arr[i]){ return true; } } return false; }

js jquery 判断元素是否在数组内

js jquery 判断元素是否在数组内一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var result1 = arr.indexOf("c"); //返回index为2 二,jquery方法 var arr = ["a", "b", "c"]; // jquery $.inA

css3动态计算元素的高度及宽度

1.px 像素,我们在网页布局中一般都是用px. 2.百分比百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度时,它的同胞div高度是根据窗口高度减去已知div高度而得到,此时就需要calc函数 viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS

js获取html元素在可视区域的位置

1)html节点在可视区域的位置 obj.getBoundingClientRect().top obj.getBoundingClientRect().left 2) 获取鼠标按下的位置 event.clientX event.clientY 3) html节点在父元素里的位置 obj.offsetTop obj.offsetLeft obj.offsetHeight 元素的高度 obj.offsetWidth 元素的宽度

js得到auto元素的高度

热门专题