您的位置:首页 > 教程笔记 > 前端笔记

获取元素在页面中的坐标位置代码实例

2023-12-04 13:49:20 前端笔记 19

本章节分享一段代码实例,它实现了获取指定元素在页面汇总坐标的功能。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var offset=$("#antzone").offset();
  var str=offset.left+"<br/>";
  str=str+offset.top;
  $("#antzone").html(str)
});
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的代码实现了我们的要求,非常的简单更多内容可以参阅相关阅读。

(1).offset()方法可以参阅jQuery offset()一章节。

(2).html()方法可以参阅jQuery html()一章节。

相关推荐

  • outline两层边框代码实例

    outline两层边框代码实例

    使用outlin属性可以实现多层边框效果。代码实例如下r co

    前端笔记 2023-12-04 13:49:15 174
  • checkbox复选框美化代码实例

    checkbox复选框美化代码实例

    默认状态下,chckbox复选框并不美观,虽然满足基本的需要。但是在美观度要求很高的网站中,实在是不堪入目,所以需要进行格外的美化。下面分享一个代码实例,它实现了复选框的美化效果。代码如下:!DO

    前端笔记 2023-12-04 13:49:14 148
  • <input type="file">美化效果代码实例

    <input type="file">美化效果代码实例

    关于这里就不介绍了,大家应该都不会陌生。但是它默认的样式实在是丑陋,难登大雅之堂,下面就分享一段代码实例,它实现了对此控件的美化效果。代码实例如下:

    前端笔记 2023-12-04 13:49:12 73
  • javascript代码性能优化简单介绍

    javascript代码性能优化简单介绍

    rint(重绘) ,rint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outlin,visibility,bckground color,不会影响到dom结构渲

    前端笔记 2023-12-04 13:49:02 187
  • outerText和innerText属性的区别实例介绍

    outerText和innerText属性的区别实例介绍

    在开始文章技术细节的区别介绍之前,先来阐明一个标准上的区别:outrTxt是符合W3C标准的,而innrTxt则是非标准的。下面来先来看一段代码实例:

    前端笔记 2023-12-04 13:48:56 171