`

javascript 获取div宽,与浏览器之间的距离

 
阅读更多

 

//导航选项卡
/*更换显示样式*/
function setTab(m,n){
	var tli = document.getElementById("menu"+m).getElementsByTagName("li");
	var mli = document.getElementById("main"+m).getElementsByTagName("ul");
	
	var faterLfet = document.getElementById("tabs1").offsetLeft;	//得到父div到浏览器左边的距离
	var titleWidth = tli[1].clientWidth;							//得到一级菜单的宽度
	var titleLeft = titleWidth * n;									//得到第n个一级菜单到父div左边的距离
	var left = faterLfet + titleLeft;								//计算第n个一级菜单到浏览器左边的距离		
	var oneMenuMiddle = left - titleWidth / 2;						//得到一级菜单重点与浏览器左边的距离
	
	for(i=0;i<tli.length;i++){
	   tli[i].className=i==n?"hover":"";
	   mli[i].style.display=i==n?"block":"none";
	   var tabs1Num = mli[n].clientWidth; 							//获取二级菜单的宽度
	   if(n == 0){
	   	  var twoLeft = oneMenuMiddle - tabs1Num / 2;				//得到二级菜单与浏览器左边的距离
	   }else{
	   	  var twoLeft = oneMenuMiddle - tabs1Num / 2 -180;			//得到二级菜单与浏览器左边的距离
	   }
	   document.getElementById("fatherDiv").style.left = twoLeft;
	}
}

 

分享到:
评论

相关推荐

    JS获取鼠标位置距浏览器窗口距离的方法示例

    本示例将详细介绍如何通过JavaScript获取这一信息,并提供了一个实际的代码示例,同时解释了不同浏览器之间的兼容性处理。 首先,我们来看一下运行效果的代码: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;&lt;/title&gt; ...

    解决多种浏览器获取滚动条高度

    本文将详细介绍如何在IE、Firefox、Opera等浏览器中准确地获取当前`div`元素的滚动条高度。 #### 一、问题背景 当一个`div`元素设置了`overflow`属性为`auto`或`scroll`时,如果内容超出了该元素的可视区域,就会...

    js获取滚动距离的方法

    在介绍JavaScript获取滚动距离的方法时,首先要了解的是页面滚动条的机制和页面布局相关的一些基本概念。在Web开发中,页面的滚动一般指的是当页面内容超出了视窗(视图区域)的大小时,用户可以使用滚动条来查看未...

    js获取div的位置坐标

    ### JavaScript 获取 div 的位置坐标详解 #### 一、引言 在前端开发中,经常需要获取页面上某个元素(如 div)的位置坐标。这有助于实现诸如弹窗定位、元素拖拽等功能,提升用户体验。本文将详细介绍如何使用 ...

    javascript拖动div或table等网页元素

    在这个主题中,我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能,并兼容不同的浏览器,包括IE、Firefox、Opera和Safari。 首先,我们来看“drag”这个关键词,它代表了拖放的核心操作。在JavaScript中,...

    jquery获取div距离窗口和父级dv的距离示例

    首先,`jQuery.offset().top/left` 用于获取元素相对于浏览器窗口的顶部和左侧的距离。这意味着它考虑了滚动条的位置,返回的是元素边缘与浏览器视口边缘的距离。在给定的例子中,`$(“.innerBox”).offset().top` ...

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...

    悬浮固定DIV悬浮固定DIV

    // 获取Div的高度 $('#floatingDiv').css({ position: 'fixed', bottom: 0, right: 0, top: (windowHeight - scrollTop - divHeight) + 'px' }); }); ``` 这段JavaScript代码首先获取了窗口的滚动位置和Div...

    js拖动div并拖动DIV的大小

    使用JavaScript获取到这个div元素,通常通过`document.getElementById`方法。然后,需要添加事件监听器来处理拖放和调整大小的动作。 4. **事件监听**: - **mousedown**:当用户按住鼠标左键时触发,初始化拖放...

    在页面固定div位置实示例

    /* 获取滚动条顶部的距离 */ $('.fixed-div').css({ 'top': scrollTop + 'px' /* 将div的top值设置为滚动的距离 */ }); }); ``` 2. **性能考虑**:虽然JavaScript可以提供更大的灵活性,但频繁的滚动事件可能会...

    DIV 样式 CSS 各种属性 JavaScript 中会用到的CSS

    【标题】:“DIV 样式 CSS 各种属性 JavaScript 中...例如,可以使用JavaScript获取或修改元素的样式属性,以响应用户的操作或者在特定条件下改变元素的外观。掌握这些CSS属性对于JavaScript开发人员来说是必不可少的。

    js 随鼠标滚动条滚动的div

    这里,`window.pageYOffset`获取的是浏览器窗口的滚动高度,将其添加到div的top样式值,使div始终与顶部保持固定的距离。 另外,对于现代浏览器,可以利用CSS的`position: sticky`属性来简化实现,无需JavaScript...

    计算Web页面的高度并给div赋高度

    - 使用JavaScript获取屏幕和元素的尺寸信息后,通过计算得出目标`&lt;div&gt;`元素的理想高度,并使用`element.style.height`来设置这个高度。 #### 实现步骤详解 1. **获取屏幕尺寸** - 首先,通过`window.screen....

    用JavaScript获取DOM元素位置和尺寸大小的方法

    本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸,并解释相关属性。 首先,我们要了解几个关键的属性: 1. `offsetWidth` 和 `offsetHeight`:这两个属性返回元素的完整外尺寸,包括内容、内边距和边框...

    js div move

    JavaScript是一种广泛用于Web开发的脚本语言,它允许我们在用户与网页交互时动态更新内容,提供更丰富的用户体验。在HTML中,`&lt;div&gt;`元素常被用作页面布局的容器,通过CSS可以设置样式,而通过JavaScript则可以赋予...

    浮动div,页面两边滚随滚动条滚动的DIV

    // 获取div的初始顶部位置 if (scrollTop &gt; sidebarTop) { $('#sticky-sidebar').css({ 'position': 'fixed', 'top': 0 /* 或者其他适当的值 */ }); } else { $('#sticky-sidebar').css('position', '...

    鼠标滚动div内容

    在网页设计中,"鼠标滚动div内容"是一种常见的交互效果,它允许用户通过鼠标滚轮在特定的div区域内浏览上下内容。这种效果通常利用JavaScript(JS)实现,以增强用户体验,尤其是在内容丰富的页面中。接下来,我们将...

    javascript获取网页各种高宽及位置的方法总结.docx

    ### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**:表示屏幕的宽度(以像素为单位)。 - **`screen.height`**:表示屏幕的高度(以像素为单位)。 - **`screen....

Global site tag (gtag.js) - Google Analytics