GrabzIt의 JavaScript API를 사용하면 생성 된 모든 HTML 요소를 CSS로 스타일링 할 수 있습니다.
이미지 스크린 샷은 displayid
및 displayclass
매개 변수. 이 매개 변수는 id 또는 class 속성 respectivley를 이미지 오브젝트에 동적으로 추가합니다. 아래 CSS 클래스는 스크린 샷 이미지에 할당됩니다.
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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@/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@/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>
기본 오류 스타일을 추가로 제거하면서
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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
기능. 이 함수는 특정 오류 코드가 반환되면 오류 메시지를 변경합니다.
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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>