整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
獲取 HTML 元素的位置坐標(biāo)，可以使用 JavaScript 中的 DOM 操作來實現(xiàn)。下面是一個示例代碼，展示如何使用 JavaScript 獲取指定類名的元素的位置坐標(biāo)：
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();
// 輸出元素的位置坐標(biāo)
console.log('元素的左上角坐標(biāo)：', rect.left, rect.top);
console.log('元素的右下角坐標(biāo)：', rect.right, rect.bottom);
console.log('元素的寬度和高度：', rect.width, rect.height);
</script>
</body>
</html>在上述代碼中，我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法獲取該元素的位置信息，返回一個包含左上角坐標(biāo)、右下角坐標(biāo)、寬度和高度等屬性的 DOMRect 對象。
最后，我們使用 console.log() 方法將元素的位置坐標(biāo)輸出到控制臺。您可以根據(jù)實際需要使用這些坐標(biāo)信息。
請注意，獲取的位置坐標(biāo)是相對于視口（viewport）的坐標(biāo)，而不是相對于整個頁面的坐標(biāo)。如果需要獲取相對于頁面的坐標(biāo)，可以結(jié)合 window.scrollX 和 window.scrollY 屬性進行計算。
嘍，大家好，我是雷工！
今天繼續(xù)學(xué)習(xí)JavaScript基礎(chǔ)語法，JS的書寫位置，俗話說：好記性不如爛筆頭，邊學(xué)邊記，方便回顧。
代碼寫在標(biāo)簽內(nèi)部
示例：
<body>
<button onclick="alert('你還真信呀？~')">點擊關(guān)注【雷工筆記】月薪過萬</button>
</body>2.1、要將JS代碼直接寫在HTML文件里面。
2.2、在HTML文件中添加一個script，用script標(biāo)簽包住，script標(biāo)簽中的代碼就是JS代碼。
2.3、script標(biāo)簽的位置可以在HTML文件中的任何地方，但推薦在head標(biāo)簽中或者body標(biāo)簽中。
示例：
<body>
<script>
alert('hello,歡迎關(guān)注雷工筆記')
</script>
</body>雷工提醒：
我們習(xí)慣將<script>標(biāo)簽放在HTML文件的底部附近，原因是瀏覽器會按照代碼在文件中的順序加載HTML。
如果先加載的JS代碼希望修改其下方的HTML，那么其可能因為要修改的HTML還未被加載而失效。所以比較穩(wěn)妥的策略是將JS代碼放在html文件的底部附近。
3.1、先創(chuàng)建一個JS文件，后綴名是xxxx.js。
3.2、使用script標(biāo)簽引入JS文件。
示例：
<body>
<!--用src引入外部JS文件-->
<script src="leigong.js"></script>
</body>雷工提醒：
外聯(lián)式JavaScript會讓代碼看上去更加有序，更容易復(fù)用，且沒有了腳本的混淆，html也更容易閱讀，因此這是值得我們學(xué)習(xí)的好習(xí)慣。
4.1、外聯(lián)式中，script標(biāo)簽的位置可以在HTML文件中的任何地方，但推薦在body標(biāo)簽中，盡量寫到文件末尾</body>
前面。
4.2、JS中內(nèi)嵌式寫法和外聯(lián)式寫法不可以混合使用，如果外聯(lián)式寫法，script標(biāo)簽中間就不可以再寫代碼，否則會被忽略，只執(zhí)行外聯(lián)部分。
以上是關(guān)于JavaScript基礎(chǔ)中書寫位置的相關(guān)知識的筆記，有不當(dāng)之處還望指正。
想起一句話，貌似是錘子科技發(fā)布會上聽到的：從來沒有什么失敗的人，只有半途而廢的人。
每天進步一點點，加油。
篇文章我們簡單介紹了css的概念以及語法，本篇文章我們將為大家介紹下css的三種引入方式。
內(nèi)鏈式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，具體的使用方法如下面所示：
<div style="color:red">設(shè)置文字的顏色為紅色</div>
這里要注意：樣式的內(nèi)容寫在元素的開始標(biāo)簽里，并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開。多個css樣式寫在一起的效果如下面所示：
<div style="color:red; font-size:14px">設(shè)置字體顏色為紅色，并且字體大小為14px</div>
嵌入式樣式表與內(nèi)鏈式不同的是可以很方便的同時修改多個相同元素的樣式屬性，比如我們想要將某個標(biāo)簽內(nèi)的內(nèi)容字體都調(diào)整為紅色，并且加粗，字體大小都調(diào)整為14px；
我們?nèi)绻褂脙?nèi)鏈式的方式，我們需要在每個標(biāo)簽上都要加上樣式，代碼就如下圖所示：
從上邊可以看出，內(nèi)鏈式會產(chǎn)生一堆的冗余代碼，而使用我們的嵌入式就比較簡單了，代碼如下圖所示：
由上圖可以看出，嵌入式我們只需要修改span標(biāo)簽，那么所有的span標(biāo)簽內(nèi)內(nèi)容的樣式都會跟著修改。
外部式css樣式就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，一般放在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)。
使用語法：<link href="style.css" rel="stylesheet" type="text/css" />
詳細講解：
1、href=""內(nèi)部的就為css文件的地址一般以英文命名，比如 base.css或者style.css等等。
2、rel="stylesheet" type="text/css" 這是w3c的標(biāo)準，固定寫法不可修改。
3、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
我們在網(wǎng)站建設(shè)中，一般都會使用外部式寫法，一來可以做到代碼分離，有助于后期的修改維護；二來可以減少頁面代碼的冗余，有助于優(yōu)化。具體的頁面代碼就如下圖所示：
我們以上三種寫法，最后所得到的結(jié)果都是一樣的，在網(wǎng)頁中呈現(xiàn)的效果都如下圖所示：
對于css的三種引入方式我們今天就先介紹到這里，我們后期進行項目制作的時候主要還是使用第三種外部式寫法，大家在平時可以自己多加聯(lián)系聯(lián)系，熟練一下css的基本操作。
每日金句：有志者自有千計萬計，無志者只感千難萬難。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
