GrabzIt의 JavaScript API를 사용하면 생성 된 모든 HTML 요소를 CSS로 스타일링 할 수 있습니다.
이미지 스크린 샷은 displayid 및 displayclass 매개 변수. 이 매개 변수는 id 또는 class 속성 respectivley를 이미지 오브젝트에 동적으로 추가합니다. 아래 CSS 클래스는 스크린 샷 이미지에 할당됩니다.
displayid
displayclass
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", {"displayclass": "MyClass"}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", {"displayclass": "MyClass"}).Create(); </script>
그런 다음 아래 그림과 같이 CSS를 지정하여 이미지의 스타일을 지정할 수 있습니다.
<style> .MyClass { border:1px solid red; } </style>
이러한 옵션을 사용하면 추가적인 이점을 통해 JavaScript를 사용하여 스크린 샷 이미지를 조작 할 수 있습니다. 지정된 ID 아래에서 생성 된 이미지 스크린 샷에 지정된 다음 지정된 끝내다 스크린 샷이로드되면 함수가 호출됩니다. 그런 다음이 함수는 지정된 id를 사용하여 스크린 샷 이미지를 가져 와서 높이를 표시합니다.
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", {"displayid": "myScreenshot", "onfinish": function (id){ var div = document.getElementById('myScreenshot'); alert(div.height); }}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", {"displayid": "myScreenshot", "onfinish": function (id){ var div = document.getElementById('myScreenshot'); alert(div.height); }}).Create(); </script>
오류 메시지는 errorid 및 errorclass 매개 변수. 이 매개 변수는 오류 메시지에 각각 id 또는 class 속성을 동적으로 추가합니다. <span> 기본 오류 스타일을 추가로 제거하면서
errorid
errorclass
<span>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", {"errorclass": "MyErrorClass"}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", {"errorclass": "MyErrorClass"}).Create(); </script>
그런 다음 아래와 같이 오류 메시지의 스타일을 지정할 수 있습니다.
<style> .MyErrorClass { font-weight:bold; } </style>
물론 이것이 오류 이벤트가 발생하면 오류 메시지를 JavaScript로 조작 할 수도 있습니다. 아래 errorid 에서 오류 메시지 범위를 참조 할 수 있도록 onerror 기능. 이 함수는 특정 오류 코드가 반환되면 오류 메시지를 변경합니다.
onerror
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", {"errorid": "myErrorMessage", "onerror": function (message, code){ if (code == 500) { var span = document.getElementById('myErrorMessage'); if (span != null) { span.innerHTML = "Oops! We will get this sorted!"; } } }}).Create(); </script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script> <script> GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", {"errorid": "myErrorMessage", "onerror": function (message, code){ if (code == 500) { var span = document.getElementById('myErrorMessage'); if (span != null) { span.innerHTML = "Oops! We will get this sorted!"; } } }}).Create(); </script>