求js代码,单击a元素之后获取b元素左边距,然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案

求js代码,单击a元素之后获取b元素左边距,然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案,第1张

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript">

 <!--

  var MaxLeft  = 1000; //最大边距值

  var Stepping = 100; //步进边距值

  /上面的值可以改动, 下面的代码就不要改了/

  var Margin   = 0;    //原边距

  $ = function( id ) { return documentgetElementById( id );}

  windowonload = function() {

   $('a')onclick = function(){

    Margin = parseInt( $('b')styleleft ); //取得B元素当前左边距

    if ( Margin >= MaxLeft ) { //如果当前边距大于等于设定的最大边距

      $('b')styleleft = '0px'; //设置左边距为0

   $('view')innerHTML = 0;   //这个只是个显示作用, 可以删除

    } else { //否则

   $('b')styleleft = (Margin + Stepping) + 'px'; //给原边距加上设定的步进值

   $('view')innerHTML = (Margin + Stepping);   //这个只是个显示作用, 可以删除

    }

   };

  };

 //-->

</script>

</head>

<body>

 <button type="button" id="a">A元素</button>

 <div id="b" style="width:500px;height:350px; background:#060; position:relative;z-index:0;top:100px;left:0px; line-height:350px;color:#fff; font-weight:bold; text-align:center">B元素,左边距:<span id="view">0</span>px</div>

</body>

</html>

经过测试, 在ie12、 360极速和兼容模式下都正常运行, 其他浏览器就不知道了, 没有测试!

方法:先需要设置控件的position属性,position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。若有多个层 切需要设定层的层次关系 那么需要设置z-index属性。

举例如下:

jquery如何设置控件位置

//offset()获取当前元素基于浏览的位置

var offsettop=$("#unamespan")offset()top;

var offsetleft=$("#unamespan")offset()left;

//position()获取当前元素基于父容器的位置

var positiontop=$("#unamespan")position()top;

var positionleft=$("#unamespan")position()left;

//设置panel2的位置基于unamespan的坐标

$("#panel2")css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});

你说的是不是z-index属性:

<img src="img/1jpg" alt="" class="star1" style="z-index:1" />

js设置css:

<div id="box">

<strong><span style="color:red"></span>总体评价</strong>

<img src="img/1jpg" alt="" class="star1" style="z-index:1" />

<img src="img/1jpg" alt="" class="star2" style="z-index:2" />

<img src="img/1jpg" alt="" class="star3" style="z-index:3" />

<img src="img/1jpg" alt="" class="star4" style="z-index:4" />

<img src="img/1jpg" alt="" class="star5" style="z-index:5" />

<img src="img/4jpg" id="notice" />

</div>

<script>

for (i=1; i<6; i++) {

documentgetElementsByClassName('star'+i)[0]stylezIndex = i;

}

</script>

以上就是关于求js代码,单击a元素之后获取b元素左边距,然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案全部的内容,包括:求js代码,单击a元素之后获取b元素左边距,然后使b元素左边距等于原本边距加上100px,麻烦给完整些的答案、jquery怎么设置控件位置、javascript里面的index属性问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9400612.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存