想要控制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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。