Nhờ tìm giúp element tag trong website

WyNotMe · September 4, 2021, 3:58pm

Chào mn! Mình đang muốn tìm element ở dưới hình trong source code mà khó quá. nhờ mn giúp mình với ạ. Mình đang muốn tìm cái element load ở bên phải ô input mà f12 không tìm được. Mình đoán nó là thẻ <i>. Mong mn giúp đỡ. Mình cảm ơn.
Trang web: https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1

superthin · September 5, 2021, 1:37am

Khó là khó sao? In code ra và đọc, rồi đoán dựa vào tiếng Anh chứ có lúc click vào đó nó nhập nhèm bởi vì CSS có thể định vị trí được các đối tượng. Cái của bạn:

<button id="sign-in" ($click)="_verify($element)" tabindex="0" class="si-button btn  fed-ui   fed-ui-animation-show   disable   remember-me   link " aria-label="
                   Continue
              " aria-disabled="true" disabled="">
                <i class="icon icon_sign_in"></i>
                <span class="text feat-split">
                    
                      Continue
                  
                </span>
                </button>

kisuluoibieng · September 5, 2021, 3:20am

đúng chán luôn, f12 rồi chỉ vô cái nút là cái đoạn này có đập vào mặt rồi
mà hỏi kiểu này thì có nghĩa là css với js cơ bản không vững

superthin · September 5, 2021, 3:43am

Có lẽ là tiếng Anh của bạn ấy còn lõm bõm, lại đọc lướt học kiểu biết tới đâu hay tới đó mà không có một chiến lược học bài bản? Hoặc không có một tấm bảng để học mà hoàn toàn phụ thuộc vào cái máy tính, trong khi máy tính, tấm bảng, sách… chỉ là công cụ, còn cái sự học lại ở người học.

WyNotMe · September 5, 2021, 9:30am

cái đó thì trước đó mình đã tìm được r ạ. nhưng cái khó là ở trên b chỉ cũng chỉ là icon mũi tên chứ ko phải loadding. cái mình muốn nhờ là cái icon loading vì khi nó chạy mình ko làm nào f12 vào nó đc. mong nhận đc sự giúp đỡ thêm

WyNotMe · September 5, 2021, 9:32am

mình ko làm nào để xác định đc element đấy đc thật. bạn dành vài phút giúp mình đc không ạ? Mình cảm ơn

superthin · September 5, 2021, 9:38am

Bạn yêu cầu cần tìm cái element, mình tìm đúng rồi đó. Còn element đó nó hiển thị lên màn hình thì được chi phối bởi một trong hai hoặc cả 2 thứ là CSS và JavaScript để tác động đến thuộc tính của element đó. Nói chung là học thêm về cách sử dụng công cụ Devtools đi nhé, học ở mức quá căn bản thì mình không thể hướng dẫn bạn thêm được vì đó là vọc các chức năng, giống kiểu chơi game vậy, game thủ rất khó hướng dẫn nhau nếu thằng kia lười chơi.

Bài tập cho bạn chính là giờ bạn làm sao để cái element đó biến thành lốc xoáy như bạn nhìn thấy. F2 khi giám sát element và thay cái gì để ra lốc xoáy?

WyNotMe · September 5, 2021, 9:38am

mình tay ngang yếu với mục đích của mình ko phải đi làm chuyên nghiệp nên mình ko có kinh nghiệm. hết cách lắm mình mới phải lên đây hỏi mn. nếu giúp đc mong bạn giúp mình lần này để tìm đc cái class chi phối thẻ i tạo lên icon loadding đấy

superthin · September 5, 2021, 10:02am

Rất khó giải thích cho bạn ở điểm này. Khi click icon mũi tên nó sẽ tạo ra một cái element chứa spinner có cái hiệu ứng xoáy xoáy (có vài cách làm khác nhau), nó là một cái div, sau đó thì div sẽ được ẩn đi như này:

<div class="spinner-container auth  hide "></div>

Cuối cùng, mục đích của bạn là để làm gì khi mà không muốn đào sâu nhưng lại đi vào cái mà khá rối rắm như vậy?

WyNotMe · September 5, 2021, 9:53am

đúng r đó bạn. mình đã để ý cái element này. nhưng khi nó chạy thấy có dấu … nhưng lại ko làm nào xem đc cái element con trong nó. f2 cũng ko đc

superthin · September 5, 2021, 9:55am

Nếu dùng DevTools chưa thạo thì cài một phần mềm quay màn hình vào, quay màn hình và chiếu chậm lại là sẽ thấy đó chính là cách làm mà mình từng làm khi chưa thạo DevTools.

WyNotMe · September 5, 2021, 9:58am

vì mình f12 các icon khác thì nó đều ra thẻ <i> nên mình đoán nó là cũng thế. còn bt kêu mình tự làm icon loadding như vậy thì là trong khả năng. còn mục đích bạn hỏi mình là để làm gì thì mục đích của mình ko phải là coder chuyên nghiệp, mình có code nhưng phục vụ mục đích riêng cho công việc của mình thôi. cảm ơn bạn đã dành thời gian ra gúp đỡ, ko coi thường công việc luôn chê là đơn giản này như những ng khác

WyNotMe · September 5, 2021, 10:16am

Cảm ơn bạn nhé. Mình vừa vọc chỉnh network về super 3g slow đã kịp nhìn em nó r. Cảm ơn pro

kisuluoibieng · September 5, 2021, 11:46am

bằng kiến thức cơ bản, có thể nghĩ ra một mẹo để lấy được cái spiner đó, không không nắm chắc những thứ căn bản thì sau này gặp lại bạn cũng chỉ có thể đi nhờ sự giúp đỡ mà thôi

<div class="spinner-container auth  show ">

<div class="spinner" role="progressbar" style="position: absolute; width: 0px; z-index: 2000000000; left: 50%; top: 50%;">
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-0-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(0deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-1-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(30deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-2-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(60deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-3-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(90deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-4-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(120deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-5-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(150deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-6-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(180deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-7-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(210deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-8-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(240deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-9-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(270deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-10-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(300deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
  <div style="position: absolute; top: -1px; opacity: 0.25; animation: 1s linear 0s infinite normal none running opacity-60-25-11-12;">
    <div style="position: absolute; width: 7.25px; height: 2.25px; background: rgb(73, 73, 73); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center; transform: rotate(330deg) translate(6.25px, 0px); border-radius: 1px;">
    </div>
  </div>
</div>


</div>

Có một tin buồn là cái này work với css/js của page, mang ra ngoài thì nó chỉ là icon tĩnh mà thôi

WyNotMe · September 5, 2021, 11:47am

cảm ơn bro nhé. mình đã giải quyết đc r. css và js của page mình đã có lấy ra từ trc đó