设置:

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元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决的更多相关文章

  1. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  2. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  3. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  4. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  5. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  6. jquery获取元素各种宽高及页面宽高总结

    window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...

  7. jquery获取元素各种宽高及页面宽高

    如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){  var divWidth = $("#div").width( ...

  8. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  9. android PercentRelativeLayout 支持百分比来设置控件的宽高

    Android 最终官方支持按百分比来设置控件的宽高了. 我们先来看看效果:       看一下布局: PercentRelativeLayout <android.support.percen ...

随机推荐

  1. 框架----Django内置Admin

    Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.contrib.contenttyp ...

  2. php中foreach使用引用的陷阱

    有时候我们为了在循环过程中改变数组项的值,在foreach的时候变量入口可以加个&符合, 表示,循环过程中使用数组中原来的值,而不是一个复制的值,如 foreach ($array as &a ...

  3. Linux系统之路——如何在CentOS7.2安装R和RStudio(Server)

    使用ubuntu的小伙伴们直接使用命令sudo apt-get install r-base-dev或者r-base搞定.然而对于使用centos的我却一直卡在安装这一步,十分的悲催,只有羡慕的份,但 ...

  4. git操作图

  5. Jugs(回溯法)

    ZOJ Problem Set - 1005 Jugs Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge In ...

  6. CSS3实现鼠标hover的过渡效果

    我想让鼠标放在div上就让它旋转变大,离开div后它又恢复本来的样子. 于是我就想写一个JS,监听一个hover事件,当hover发生的时候,触发一个计时器,在计时器里写两个值,一个管角度,一个管宽度 ...

  7. 区分IE8 、IE9 的专属css hack

    一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们如果使用css3,在IE ...

  8. 【CodeForces】915 G. Coprime Arrays 莫比乌斯反演

    [题目]G. Coprime Arrays [题意]当含n个数字的数组的总gcd=1时认为这个数组互质.给定n和k,求所有sum(i),i=1~k,其中sum(i)为n个数字的数组,每个数字均< ...

  9. iOS7下滑动返回与ScrollView共存二三事

    [转载请注明出处] = =不是整篇复制就算注明出处了亲... iOS7下滑动返回与ScrollView共存二三事 [前情回顾] 去年的时候,写了这篇帖子iOS7滑动返回.文中提到,对于多页面结构的应用 ...

  10. Spring Boot中使用MongoDB数据库

    前段时间分享了关于Spring Boot中使用Redis的文章,除了Redis之后,我们在互联网产品中还经常会用到另外一款著名的NoSQL数据库MongoDB. 下面就来简单介绍一下MongoDB,并 ...