设置:

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. laravel 添加自定义 Provider 配置之后不生效的问题

    有可能是配置缓存导致的, 运行: php artisan config:clear 可清除配置缓存,配置缓存保存在 bootstrap/cache/config.php,可以直接去那文件夹看看是不是缓 ...

  2. 电商网站中价格的精确计算(使用BigDecimal进行精确运算(实现加减乘除运算))

    使用BigDecimal的String的构造器.商业计算中,使用bigdecimal的String构造器,一定要用. 重要的事情说三遍: 商业计算中,使用bigdecimal的String构造器! 商 ...

  3. Git之安装及使用

    学习使用Git来管理平时自己写的demo代码和阅读的一些源码,因为一直在windows中操作所以开始学习用Git Bash操作在github上的代码.git命令和svn命令是很相似的,我觉得没有必要把 ...

  4. 对于redis框架的理解(二)

    之前梳理过redis main函数主体流程 大体是 initServerConfig() -> loadServerConfig() -> daemonize() -> initSe ...

  5. Windows 2008 R2上配置IIS7或IIS7.5中的URLRewrite(URL重写)实例

    1. 安装URL Rewrite模块 下载页面 re_write_x86_zh_CN.msi from microsoft re_write_x64_zh_CN.msi from microsoft安 ...

  6. nodejs文件压缩-使用gulp命令(安装过程)

    为了代码安全问题,一般发布程序的时候需要将js代码进行压缩,记录一下安装流程.避免忘记. 安装插件

  7. HTML5文件上传器,纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

  8. 【BZOJ】2004: [Hnoi2010]Bus 公交线路 状压DP+矩阵快速幂

    [题意]n个点等距排列在长度为n-1的直线上,初始点1~k都有一辆公车,每辆公车都需要一些停靠点,每个点至多只能被一辆公车停靠,且每辆公车相邻两个停靠点的距离至多为p,所有公车最后会停在n-k+1~n ...

  9. http://www.cnblogs.com/kkdn/

    /*** PHP保留两位小数的几种方法* @link http://www.phpddt.com*/$num = 10.4567; //第一种:利用round()对浮点数进行四舍五入echo roun ...

  10. 浅谈卡特兰数(Catalan number)的原理和相关应用

    一.卡特兰数(Catalan number) 1.定义 组合数学中一个常出现在各种计数问题中出现的数列(用c表示).以比利时的数学家欧仁·查理·卡特兰的名字来命名: 2.计算公式 (1)递推公式 c[ ...