JavaScript(获取或设置html元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决
设置:
document.getElementById('id').style.width=value
document.getElementById('id').style.height=value
document.getElementById('id').style.top=value
document.getElementById('id').style.left=value
获取:
value=document.getElementById('id').offsetLeft
value=document.getElementById('id').offsetTop
value=document.getElementById('id').offsetWidth
value=document.getElementById('id').offsetHeight
找一个元素的坐标:
function findPosition( oElement )
{
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
alert(width + "=" + height);
if( typeof( oElement.offsetParent ) != 'undefined' )
{
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x2 = posX + width;
y2 = posY + height;
return [ posX, posY ,x2, y2]; } else{
x2 = oElement.x + width;
y2 = oElement.y + height;
return [ oElement.x, oElement.y, x2, y2];
}
}
知识进阶,二级导航展示隐藏效果问题(鼠标经过一级菜单二级菜单展示,鼠标离开一级菜单相应的二级菜单隐藏,而导致鼠标在一级菜单和二级菜单过渡过程中二级菜单隐藏,无法点到二级菜单):
$("一级导航菜单").mouseover(function() {
var index = $(this).find("a").attr("index");
$(".list-1st2-li").removeClass("list-spread"); //先删除掉所有一级菜单展开的样式
$(".sp-item-" + index).addClass("list-spread");//
});
//鼠标离开时判断鼠标是否在当前li范围内部,如果不是就去掉list-spread类样式
$("一级导航菜单").mouseleave(function(event) {
var oElement = $(this)[0];
var x = event.clientX;
var y = event.clientY;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var width = oElement.offsetWidth;
var height = oElement.offsetHeight;
if(typeof(oElement.offsetParent) != 'undefined') {
for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
x1 = posX;
y1 = posY;
x2 = posX + width;
y2 = posY + height;
} else {
x1 = oElement.x;
y1 = oElement.y;
x2 = oElement.x + width;
y2 = oElement.y + height;
}
//鼠标不在一级导航菜单元素内部
if(x <= x1 || x >= x2 || y <= y1 || y >= y2) {
var index = $(this).find("a").attr("index");
$(".sp-item-" + index).removeClass("list-spread");
}
});
$("二级子菜单").mouseout(function() {
$(this).removeClass("list-spread");
});
JavaScript(获取或设置html元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决的更多相关文章
- 隐藏元素的宽高无法通过原生js获取的问题
1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- 如何获取设置display:none元素及子元素的宽高
由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
- jquery获取元素各种宽高及页面宽高总结
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...
- jquery获取元素各种宽高及页面宽高
如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){ var divWidth = $("#div").width( ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- android PercentRelativeLayout 支持百分比来设置控件的宽高
Android 最终官方支持按百分比来设置控件的宽高了. 我们先来看看效果: 看一下布局: PercentRelativeLayout <android.support.percen ...
随机推荐
- Hdu2433 Travel
Travel Time Limit: 10000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- 配置:heartbeat+nginx+mysqld+drbd高可用笔记(OK)
参考资料:http://www.centoscn.com/CentosServer/cluster/2015/0605/5604.html 背景需求: 使用heartbeat来做HA高可用,并且把 ...
- K8S Link
https://www.cnblogs.com/linuxk/p/9783510.html https://www.cnblogs.com/fengzhihai/p/9851470.html
- CSS3笔记-加强版
属性选择器: E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value&quo ...
- Visual Studio Code 如何编写运行 C、C++ 程序?
0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...
- DialogFragment 将数据传回Activity的onActivityResult方法
在MyActivity中 弹出一个DialogFragment (某一个控件的点击事件) search= findViewById(R.id.search); search.setOnClickLis ...
- Jugs(回溯法)
ZOJ Problem Set - 1005 Jugs Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge In ...
- JavaScript 秘密花园——对象的使用和属性操作
JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined. false.toString(); // 'false' [1, 2, 3].toString(); // ...
- 关于Http协议、ASP.NET 核心知识(2)
简介HTTP (对于http协议的描述我前部分有写,但基于保证文档独立完整性的原则,我再写一遍.反正又不花钱.) 这货的学名叫:超文本传输协议 英文名字:(HTTP,HyperText Transfe ...
- iframe子夜页面调父页面的方法 取父页面的值
1.调父页面的方法的写法 window.parent.yincang();//yincang()是父页面的一个方法 2.取父页面的值的写法 window.parent.document.gettEle ...