scrollWidth、scrollHeight
元素實際內容的寬度/高度，不包邊線寬度，會隨對象中內容超過可視區後而變大。
clientWidth、clientHeight
元素內容的可視區的寬度/高度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。
offsetWidth、offsetHeight
元素整體的實際寬度/高度，包滾動條等邊線，會隨對象顯示大小的變化而改變。
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
clientX、clientY
鼠標的x,y以瀏覽器視窗左上為原點
screenX、screenY
鼠標的x,y以使用者螢幕左上為原點
pageX、pageY
鼠標的x,y以瀏覽器頁面左上為原點
offsetX、offsetY
鼠標位置與目標節點左上padding為原點
layerX、layerY
position為absolute或relative的父元素的左上為原點
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
將字串轉換成數字的方法有三種
parseInt()
parseInt()方法可將字串轉換成一個整數，接受兩個參數，第一個參數 string 是要轉換為數字的字串，第二個參數 radix 則是要用二進位、八進位、十進位或十六進位
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
.closest()
Element.closest（）方法用來獲取：匹配特定選擇器且離當前元素最近的祖先元素（也可以是當前元素本身）。如果匹配不到，則返回null。
var elem = document.querySelector('#some-element');
var closestParent = elem.closest('.pick-me');
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top

使用JS達到移除元素的效果有兩種方式
1.使用CSS隱藏元素
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
appendChild()
appendChild()將元素添加到一組元素的結尾
// Create a new element
var newNode = document.createElement('div');
// Get the parent node
var parentNode = document.querySelector('#some-element');
// Insert the new node after the last element in the parent node
parentNode.appendChild(newNode);
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
使用insertBefore()，並將元素加入至父層的第一個元素之前
// Create a new element
var newNode = document.createElement('div');
// Get the parent node
var parentNode = document.querySelector('#some-element');
// Insert the new node before the reference node
parentNode.insertBefore(newNode, parentNode.firstChild);
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
使用insertBefore()，並在node後呼叫下一個節點元素
// Create a new element
var newNode = document.createElement('div');
// Get the reference node
var referenceNode = document.querySelector('#some-element');
// Insert the new node before the reference node
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
insertBefore()
傳統方法中使用insertBefore()，需要呼叫父層再插入元素
// 建立新元素
var newNode = document.createElement('div');
// 取得node
var referenceNode = document.querySelector('#some-element');
// 在referenceNode前插入newNode
referenceNode.parentNode.insertBefore(newNode, referenceNode);
 
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
在JQuery可以使用標籤建立元素
var elem = <div></div>
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
驚嘆號(!)是個邏輯運算符，名稱為”Logic NOT”，用在布林值上具有反轉(Inverted)的功能，雙驚嘆號(!!)就等於”反轉再反轉“，等於轉回原本的布林值:
const aBool = true
const bBool = !aBool // false
const cBool = !!aBool // true
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
<div class="expand">
content
</div>
一般的類別我們無法輕易看出它是否只用於CSS或JS，亦或是CSS與JS兩者兼具。
不知道的人可能會認為它只用在CSS而去移除、重新命名，為了避免造成不必要的麻煩，
以下有2種解決方法
1. 使用.js-前綴
加了js-前綴表示有使用到js
(繼續閱讀...)

浣熊 發表在 痞客邦 留言(0) 人氣()

▲top
« 1 2 3
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲，請立即離開。

已滿十八歲者，亦請勿將內容提供給未成年人士。