首頁 > web前端 > js教程 > 主體

JavaScript怎麼改變滑鼠指標樣式

青灯夜游
發布: 2023-01-07 11:44:24
原創
15343 人瀏覽過

在JavaScript中,可以透過style物件的cursor屬性來改變滑鼠指標樣式,該屬性定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀;語法格式「元素物件.style. cursor= "指標樣式值"”。

JavaScript怎麼改變滑鼠指標樣式

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript中改變滑鼠指標樣式的方法

#在js中我們可以透過style物件的cursor屬性來設定滑鼠指標的樣式,例如

 var body = document.querySelector("body")
	body.style.cursor= "move"
登入後複製

以上程式碼就實現了頁面開啟後,滑鼠的指標就被替換成一個十字架樣式,其實還有很多樣式,如下圖所示
JavaScript怎麼改變滑鼠指標樣式
透過cursor屬性我們也可以將指標替換為自訂圖片,方法如下

	obox1.onmousemove = function(){
		this.style.cursor = 'url(../favicon.ico),auto';
	}
登入後複製

需要注意的是url中的圖片僅支援.cur.ico 格式的圖片。這裡推薦一個線上生成ico格式的網站 點擊這裡跳轉。

url後的auto是可以自己設定的 當替換的圖片路徑有誤或格式不對沒有找到時,滑鼠指標將會使用的樣式。

【推薦學習:javascript進階教學

#

以上是JavaScript怎麼改變滑鼠指標樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板