我正在嘗試在我的按鈕上撰寫腳本。我不知道我的代碼有什么問題。但是，當我嘗試在 codepen 上撰寫它時，它完全符合我的預期。我之前在vscode上寫過，但是遇到了錯誤。
我試圖在外部 js 中重新創建它，但也沒有作業
const btn = document.querySelector('.btn');
btn.onmousemove = function (e) {
const x = e.pageX - btn.offsetLeft;
const y = e.pageY - btn.offsetTop;
btn.style.setProperty('--x', x 'px');
btn.style.setProperty('--y', y 'px');
};.btn {
position: relative;
display: inline-flex;
padding: 10px 30px;
background-color: #363636;
color: #fff;
text-decoration: none;
letter-spacing: 2px;
overflow: hidden;
}
.btn span {
position: relative;
z-index: 1;
}
.btn::before {
content: "";
position: absolute;
top: var(--y);
left: var(--x);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background: #2196f3;
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}<a href="#" class="btn"><span>Button</span></a>Uncaught TypeError: Cannot set properties of null (setting 'onmousemove')
at js.js:2:23
uj5u.com熱心網友回復：
該錯誤告訴您您嘗試更改其屬性的元素為空。這樣做的原因是您的 JavaScript 代碼在您的 HTML 元素加載之前執行。
將您的代碼包裝在 window.onload 函式中，它應該可以按預期作業。
window.onload = function(){
// rest of code
};
或者，您也可以嘗試將“defer”屬性添加到 HTML 中的腳本標記。
<script src="script.js" defer></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532011.html