JS 无法 query select 到伪元素
参考: 使用JS控制伪元素的几种方法
JS style remove property 是 kebab-case
set property 是 camelCase
navList.style.maxHeight = `${window.innerHeight - navHeight}px`;
navList.style.overflowY = 'auto';
remove property 是 kebab-case
navList.style.removeProperty('max-height');
navList.style.removeProperty('overflow-y');
camelCase 是 remove 不掉的哦, 小心.
当 getComputedStyle 遇上 inline 返回值会是 auto
通常发生在想获取 span 的 width 的时候, 可以改拿 element.offsetWidth, 或者将 element display 改成 inline-block.
querySelector Child Layer Only
参考: Stack Overflow – Using querySelectorAll to retrieve direct children
swiperContainer.querySelector<HTMLElement>('> .swiper')!;
直接写 > 是不行的. 要加一个 :scrope, 支持度还不错, 只有 ie 不支持.
const swiper = swiperContainer.querySelector<HTMLElement>(':scope > .swiper')!;
这样就可以了.
Custom Event 默认是不冒泡的
dispatch 的时候要开启, 默认是不冒泡的哦
ellipsis.dispatchEvent(new CustomEvent('ellipsisopen', { bubbles: true }));
HTMLScriptElement text vs textContent
参考: MDN – HTMLScriptElement, Node.textContent
set 的时候, 它的表现和 textContent 是一摸一样的.
get 的时候, textContent 会把子孙的 text node 也拿出来, 但是 text 则不会. 当然 script 里面是不应该出现子孙 element 的丫.
测试代码
const script = document.createElement("script"); const text = document.createTextNode(`console.log('Hello World');`); script.appendChild(text); const comment = document.createComment("my comment"); script.appendChild(comment); const div = document.createElement("div"); div.appendChild(document.createTextNode(`Hello World`)); script.appendChild(div); console.log(script.text); // console.log('Hello World'); console.log(script.textContent); // console.log('Hello World');Hello World document.head.appendChild(script);
body.offsetWidth 不包含 scrollbar width
一般的 div.offsetWidth 是包含 scrollbar width 的, div.clientWidth 则不包含.
但 body 很奇怪, 它的 offsetWidth 是不包含 scrollbar width 的.
比如我的 1920px, 当 scrollbar 出现后, offsetWidth 变成了 1903px
所以呢, 如果要想获取 body scrollbar width 可以用另一招.
window.innerWidth 配上 body.offsetWidth.
window.innerWidth 是 viewport width 包含了 scrollbar width. 而 body.offsetWidth 则没有包含