获得html元素自身的宽度

想要控制html元素显示的clip量.
最好是要知道html元素自身能有多么大的宽度.

接上一文章.
父nav截断了子元素的显示.
-
那么使用鼠标可以获得子元素的实际需要的宽度.
加载完毕之后,可以使用js动态控制nav的宽度.:想要100%,120%,80%的宽度.

用到javascript属性.offsetWitdh
与此类似的还有,scrollWitdh,scrollLeft,clientWidth
参考链接:HTML精准定位

获取宽度
-
获取鼠标位置.
使用onmouseover来监测.
使用到的javascript关键词:eventX,eventY,offsetX,offsetY
使用相对于容器坐标.则需要offset.

进一步 可以使用设置scrollLeft修改滚动位置.

附(本文章功用测试源代码):

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8"><title>javascript 获取dom宽度</title><style>#outer{width:10em;overflow: hidden;border:1px solid #e3e3e2;background: #f2f3f4;padding:.3em 0;}#inner{width:16em;padding:.3em;background: #fff;}</style>
</head>
<body><div id="outer"><div id="inner">ko</div></div><script>var inner=document.getElementById('inner');var outer=document.getElementById('outer');inner.innerHTML = inner.offsetWidth+" / "+outer.offsetWidth;outer.style.width = inner.offsetWidth*.8 + "px";inner.innerHTML = inner.innerHTML+" / "+outer.offsetWidth;inner.onmousemove=function(){inner.innerHTML=event.offsetX+"/"+event.clientX;}</script>
</body>
</html>

获得html元素自身的宽度相关推荐

javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
js原生获取html的高度,如何通过js获取Html元素的实际宽度高度
如何通过js获取Html元素的实际宽度高度发布时间:2020-04-24 15:23:24 来源:亿速云阅读:136 作者:小新今天小编给大家分享的是如何通过js获取Html元素的实际宽度高度, ...
js获取div元素高度和宽度的方法
前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生JS与JQ如何快速的获取DIV元素的高度和宽度的方法. js获取div元素高度与宽度的方法 js获取div元素的高 ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
CSS定义如何计算一个元素的总宽度和总高度
box-sizing CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度. 在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width ...
js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
得到目标元素距离视口的距离以及元素自身的宽度与高度（用于浮层位置的动态改变）...
以前所有操作都用弹窗弹个小层出来,然后最近整体换成了气泡风格,点哪里操作浮层就出现在哪里.我采用的是共用一个操作浮层,随元素位置而变换浮层的位置. 思路大概就是如下: 第一:确定浮层基于哪个元素定位 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
元素位置及宽度的计算总节
1.dom.getBoundingClientRect().left/top/right/bottom/height/width; 返回元素相对于浏览器窗口的相对位置及自身的宽高. IE中只能获取到元 ...

获得html元素自身的宽度

获得html元素自身的宽度相关推荐

最新文章

热门文章