[JavaScript] Force-DOM-reflow-JS 

Force-DOM-reflow-JS

 

https://github.com/anonyco/Force-DOM-reflow-JS

 

Overview and Install

Have you ever needed to force a dom reflow during transitions or other purposes? Do you find yourself frustrated with the cross browser solutions being too hackish and not-working-right? Then look no further. Simply insert the following 189-byte line of code into the top of your script to solve all your problems.

try{var forceReflowJS=(forceReflowJS=function(a){"use strict";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"offsetHeight").get)}catch(e){}//anonyco

()

Then, the code above create a forceReflow function that gets passed an Element and reflows the element. Example usage.

try{var forceReflowJS=(forceReflowJS=function(a){"use strict";void a.offsetHeight}).call.bind(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"offsetHeight").get)}catch(e){}//anonyco

forceReflowJS(document.documentElement); // reflows the whole page

Compatibility

The code is guarenteed to work in all current browsers and in IE 9 and up.

How It Works

You may have seen the following code snippets in production

var ele = document.getElementById("someRandomId");
ele.offsetHeight;

Or, some production snippets even go through the trouble of including a void to increase browser compatiblity.

var ele = document.getElementById("someRandomId");
void ele.offsetHeight;

However, lets face it: theese are hackish solutions that are flimsy and temporary because the browser can easily optimize the above statementes out. However, force-Reflow-JS is different in that it explictily tells the browser not to remove the statement through increasing the complexity of the statement to a degree at which one would not exert without reason and just cause. In English, when the browser sees forceReflowJS, it doesn't just see void ele.offsetHeight, rather it sees much more. Internally, the browser thinks like this when it sees forceReflowJS.

var ele = document.getElementById("someRandomId");
ele["offsetHeight"] /*%<-- VERY IMPORTANT CODE SNIPPET! DO NOT REMOVE! URGENT! THIS IS THE BROWSER SPEAKING TO ITSELF! -->%*/;

Please note that while the alternatives are flimsy, ForceReflowJS unfourtunately has to fall back to void ele.offsetHeight in unsupporting browsers. However, no need to worry too much: these unsupporting browsers likely do not optimize enough to be able to get rid of this flmsy statement.

 

https://github.com/anonyco/Force-DOM-reflow-JS

 

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

// forces a complete reflow of a single element

try {

window.forceReflowJS = Function.prototype.call.bind( // wrap it all up into an auto

Object.getOwnPropertyDescriptor( // obtain the internal funciton that performs the reflow

HTMLElement.prototype,

"offsetHeight"

).get

);

} catch(e) {

window.forceReflowJS = function(a){void a.offsetHeight};

}

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
31 [web개발] [jQuery] Select박스 option 값 선택하기 졸리운_곰 2021.10.20 651
30 [web개발][javascript][JQuery] textarea 값 설정및 값 가져오기 졸리운_곰 2021.10.19 440
29 [javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1 file 졸리운_곰 2021.09.07 570
28 [HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery 졸리운_곰 2021.06.01 739
27 textarea 태그에 값을 넣고 뺄때 아니면 개행문자 '\n'이 혼란이 온다 졸리운_곰 2019.04.08 692
26 jQuery ready와 load의 차이 file 졸리운_곰 2019.03.29 733
25 How can I detect if a selector returns null? 졸리운_곰 2019.03.25 454
24 jQuery.isEmptyObject() 졸리운_곰 2019.03.24 793
23 [jQuery]요소를 추가하는 메소드(append, prepend, after, before) 졸리운_곰 2019.03.10 575
22 jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 file 졸리운_곰 2019.03.10 583
21 How do you convert a jQuery object into a string? 졸리운_곰 2019.03.10 454
20 JQuery 오브젝트 셀렉트한 select object의 내용 확인 졸리운_곰 2019.03.10 600
19 JQuery Object 선언 : jQuery creating objects [duplicate] 졸리운_곰 2019.03.06 542
18 [제이쿼리] 태그 및 요소 삭제, Remove() file 졸리운_곰 2019.03.06 848
17 jQuery .each문(for문) 사용시 break, continue를 하려면? file 졸리운_곰 2019.03.06 742
16 jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드 file 졸리운_곰 2019.03.06 543
15 [jQuery] 선택자에 변수 넣기 졸리운_곰 2019.03.04 640
14 JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery 졸리운_곰 2019.01.10 532
13 Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용 졸리운_곰 2019.01.07 625
12 [jQuery] Ajax 방법 졸리운_곰 2018.08.03 655
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED