整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
获取 HTML 元素的位置坐标，可以使用 JavaScript 中的 DOM 操作来实现。下面是一个示例代码，展示如何使用 JavaScript 获取指定类名的元素的位置坐标：
htmlCopy code
<!DOCTYPE html>
<html>
<body>
<div class="my-element">This is a div element.</div>
<script>
// 获取具有指定类名的元素
var element = document.querySelector('.my-element');
// 获取元素的位置信息
var rect = element.getBoundingClientRect();
// 输出元素的位置坐标
console.log('元素的左上角坐标：', rect.left, rect.top);
console.log('元素的右下角坐标：', rect.right, rect.bottom);
console.log('元素的宽度和高度：', rect.width, rect.height);
</script>
</body>
</html>在上述代码中，我们首先使用 querySelector() 方法获取具有指定类名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法获取该元素的位置信息，返回一个包含左上角坐标、右下角坐标、宽度和高度等属性的 DOMRect 对象。
最后，我们使用 console.log() 方法将元素的位置坐标输出到控制台。您可以根据实际需要使用这些坐标信息。
请注意，获取的位置坐标是相对于视口（viewport）的坐标，而不是相对于整个页面的坐标。如果需要获取相对于页面的坐标，可以结合 window.scrollX 和 window.scrollY 属性进行计算。
喽，大家好，我是雷工！
今天继续学习JavaScript基础语法，JS的书写位置，俗话说：好记性不如烂笔头，边学边记，方便回顾。
代码写在标签内部
示例：
<body>
<button onclick="alert('你还真信呀？~')">点击关注【雷工笔记】月薪过万</button>
</body>2.1、要将JS代码直接写在HTML文件里面。
2.2、在HTML文件中添加一个script，用script标签包住，script标签中的代码就是JS代码。
2.3、script标签的位置可以在HTML文件中的任何地方，但推荐在head标签中或者body标签中。
示例：
<body>
<script>
alert('hello,欢迎关注雷工笔记')
</script>
</body>雷工提醒：
我们习惯将<script>标签放在HTML文件的底部附近，原因是浏览器会按照代码在文件中的顺序加载HTML。
如果先加载的JS代码希望修改其下方的HTML，那么其可能因为要修改的HTML还未被加载而失效。所以比较稳妥的策略是将JS代码放在html文件的底部附近。
3.1、先创建一个JS文件，后缀名是xxxx.js。
3.2、使用script标签引入JS文件。
示例：
<body>
<!--用src引入外部JS文件-->
<script src="leigong.js"></script>
</body>雷工提醒：
外联式JavaScript会让代码看上去更加有序，更容易复用，且没有了脚本的混淆，html也更容易阅读，因此这是值得我们学习的好习惯。
4.1、外联式中，script标签的位置可以在HTML文件中的任何地方，但推荐在body标签中，尽量写到文件末尾</body>
前面。
4.2、JS中内嵌式写法和外联式写法不可以混合使用，如果外联式写法，script标签中间就不可以再写代码，否则会被忽略，只执行外联部分。
以上是关于JavaScript基础中书写位置的相关知识的笔记，有不当之处还望指正。
想起一句话，貌似是锤子科技发布会上听到的：从来没有什么失败的人，只有半途而废的人。
每天进步一点点，加油。
篇文章我们简单介绍了css的概念以及语法，本篇文章我们将为大家介绍下css的三种引入方式。
内链式css样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：
<div style="color:red">设置文字的颜色为红色</div>
这里要注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。多个css样式写在一起的效果如下面所示：
<div style="color:red; font-size:14px">设置字体颜色为红色，并且字体大小为14px</div>
嵌入式样式表与内链式不同的是可以很方便的同时修改多个相同元素的样式属性，比如我们想要将某个标签内的内容字体都调整为红色，并且加粗，字体大小都调整为14px；
我们如果使用内链式的方式，我们需要在每个标签上都要加上样式，代码就如下图所示：
从上边可以看出，内链式会产生一堆的冗余代码，而使用我们的嵌入式就比较简单了，代码如下图所示：
由上图可以看出，嵌入式我们只需要修改span标签，那么所有的span标签内内容的样式都会跟着修改。
外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，一般放在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内。
使用语法：<link href="style.css" rel="stylesheet" type="text/css" />
详细讲解：
1、href=""内部的就为css文件的地址一般以英文命名，比如 base.css或者style.css等等。
2、rel="stylesheet" type="text/css" 这是w3c的标准，固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
我们在网站建设中，一般都会使用外部式写法，一来可以做到代码分离，有助于后期的修改维护；二来可以减少页面代码的冗余，有助于优化。具体的页面代码就如下图所示：
我们以上三种写法，最后所得到的结果都是一样的，在网页中呈现的效果都如下图所示：
对于css的三种引入方式我们今天就先介绍到这里，我们后期进行项目制作的时候主要还是使用第三种外部式写法，大家在平时可以自己多加联系联系，熟练一下css的基本操作。
每日金句：有志者自有千计万计，无志者只感千难万难。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
*请认真填写需求信息，我们会在24小时内与您取得联系。
