獲取 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)系。