JavaScript API GrabzIt pozwala stylizować wszystkie wygenerowane elementy HTML za pomocą CSS.
Zrzuty ekranów obrazów można projektować za pomocą displayid
i displayclass
parametry Te parametry dynamicznie dodają odpowiednio atrybut id lub class do obiektu obrazu. Poniżej CSS klasa jest przypisana do obrazu zrzutu ekranu.
<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>
Następnie można określić styl CSS, aby nadać styl obrazowi, jak pokazano poniżej.
<style> .MyClass { border:1px solid red; } </style>
Dodatkową zaletą korzystania z tych opcji jest także możliwość użycia JavaScript do manipulacji obrazem zrzutu ekranu. Poniżej określonego identyfikatora przypisany jest zrzut ekranu wygenerowanego obrazu, a następnie określony onfinish funkcja jest wywoływana po załadowaniu zrzutu ekranu. Ta funkcja używa określonego identyfikatora, aby uzyskać zrzut ekranu i wyświetla jego wysokość.
<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>
Komunikaty o błędach można nadawać styl za pomocą errorid
i errorclass
parametry Te parametry dynamicznie dodają odpowiednio atrybut id lub class do komunikatu o błędzie <span>
element, jednocześnie usuwając domyślny styl błędu.
<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>
Komunikat o błędzie można następnie nadać styl, jak pokazano poniżej.
<style> .MyErrorClass { font-weight:bold; } </style>
Oczywiście, jeśli jest to używane w połączeniu z onerror zdarzenie, wówczas komunikat o błędzie może być również zmieniany za pomocą JavaScript. Poniżej errorid
jest określony, aby można było odwoływać się do zakresu komunikatów o błędach w pliku onerror
funkcjonować. Ta funkcja następnie zmienia komunikat o błędzie, jeśli zostanie zwrócony określony kod błędu.
<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>