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 ...
随机推荐
- HDU 6194 后缀数组
string string string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- WIFI Direct(Wi-Fi P2P)
Wi-Fi Direct技术是Wi-Fi产业链向蓝牙技术发起的挑战,它试图完全取代蓝牙 Wi-Fi Direct是一种点对点连接技术,它可以在两台station之间直接建立tcp/ip链接,并不需要A ...
- turn服务部署
centos7.2 git clone https://github.com/coturn/coturnyum -y install openssl-develyum install openssl ...
- Python进行数据分析(二)MovieLens 1M 数据集
# -*- coding: utf-8 -*- """ Created on Thu Sep 21 12:24:37 2017 @author: Douzi " ...
- 开发技巧:高效的使用 Response.Redirect
我正在评估一个 ASP.NET Web 项目应用.它有一些可扩展性问题.意味着当网站访问量增加的时候.系统将会变得缓慢.当我查看应用日志.我找到了大量的 ThreadAbortException. 这 ...
- [转] Linux下程序的加载、运行和终止流程
TAG: linux, main, _start DATE: 2013-08-08 原文地址: http://blog.csdn.net/tigerscorpio/article/details/62 ...
- 【转载】iPhone系统概览
iPhone OS OverviewiPhone系统概览iPhone OS comprises the operating system and technologies that you use t ...
- 在Unity中实现屏幕空间阴影(1)
接着上篇文章,我们实现了SSR效果. 其中的在屏幕空间进行光线追踪的方法是通用的.借此我们再实现一种屏幕空间的效果,即屏幕空间阴影. 文中的图片来自Catlike coding http://catl ...
- 23、Xpath
1.什么是Xpath?1.XPath即为XMLPath的简称,它是一种用来确定XML文档中某部分位置的语言.2.HTML可以看做是XML的一种实现,所以selenium用户可以使用这种强大的语言在we ...
- 【译】第一篇 SQL Server代理概述
本篇文章是SQL Server代理系列的第一篇,详细内容请参考原文. SQL Server代理是SQL Server的作业调度和告警服务,如果使用得当,它可以大大简化DBA的工作量.SQL Serve ...