设置:

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. bzoj3938 Robot

    3938: Robot Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 336  Solved: 112[Submit][Status][Discuss ...

  2. HashCode与Equals回顾

    HashSet和HashMap一直都是JDK中最常用的两个类,HashSet要求不能存储相同的对象,HashMap要求不能存储相同的键. 那么Java运行时环境是如何判断HashSet中相同对象.Ha ...

  3. 阳/阴性预测值Positive/negative Predictive Value(推荐AA)

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...

  4. Patch multi versions of windows via Power shell

    Patch multi versions of windows via Power shell $version = Get-WmiObject -Class Win32_OperatingSyste ...

  5. Tensorboard教程:显示计算图中节点信息

    Tensorboard显示计算图节点信息 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 强烈推荐Tensorflow实战Google深度学习框架 实验平台: Tensorflow1 ...

  6. UVA 818 Cutting Chains

    https://vjudge.net/problem/UVA-818 题意: 有n个圆环,其中有一些已经扣在了一起.现在需要打开尽量少的圆环,使得所有圆环可以组成一条链 n<=15 因为n< ...

  7. UVA 1575 Factors

    https://vjudge.net/problem/UVA-1575 题意: 令f(k)=n 表示 有n种方式,可以把正整数k表示成几个数的乘积的形式. 例 10=2*5=5*2,所以f(10)=2 ...

  8. Python进行数据分析(二)MovieLens 1M 数据集

    # -*- coding: utf-8 -*- """ Created on Thu Sep 21 12:24:37 2017 @author: Douzi " ...

  9. Spring Boot 使用IntelliJ IDEA创建一个web开发实例(四)

    多环境配置 1. 在springBoot多环境配置文件名需要满足application-{profile}.properties的格式,其中{profile}对应你的环境标识,例如: (1)appli ...

  10. 重构改善既有代码设计--重构手法07:Remove Assignments to Parameters (移除对参数的赋值)

    代码对一个 参数赋值.以一个临时变量取代该参数的位置.     int Discount(int inputVal, int quantity, int yearTodate) { if (input ...