整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
獲取 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小時內與您取得聯系。
