Met de JavaScript API van GrabzIt kunnen alle gegenereerde HTML-elementen worden gestileerd met CSS.
Beeldschermafbeeldingen kunnen worden vormgegeven met de displayid
en displayclass
parameters. Deze parameters voegen dynamisch het respectieve kenmerk id of class toe aan het afbeeldingsobject. Hieronder een CSS klasse wordt toegewezen aan de screenshotafbeelding.
<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 kan vervolgens worden opgegeven om de afbeelding op te maken, zoals hieronder wordt getoond.
<style> .MyClass { border:1px solid red; } </style>
Een bijkomend voordeel van het gebruik van deze opties is dat u ook JavaScript kunt gebruiken om de screenshotafbeelding te manipuleren. Hieronder wordt het opgegeven ID toegewezen aan het gegenereerde screenshot en vervolgens aan het opgegeven onfinish functie wordt aangeroepen zodra het screenshot is geladen. Deze functie gebruikt vervolgens de opgegeven id om de screenshotafbeelding te krijgen en geeft de hoogte weer.
<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>
Foutmeldingen kunnen worden gestileerd met behulp van de errorid
en errorclass
parameters. Met deze parameters wordt respectievelijk het id- of class-kenmerk dynamisch aan het foutbericht toegevoegd <span>
element, terwijl bovendien de standaardfoutstijl wordt verwijderd.
<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>
Het foutbericht kan vervolgens worden opgemaakt, zoals hieronder wordt weergegeven.
<style> .MyErrorClass { font-weight:bold; } </style>
Natuurlijk als dit wordt gebruikt in combinatie met de onerror gebeurtenis dan kan de foutmelding ook worden gemanipuleerd met JavaScript. Hieronder een errorid
is opgegeven zodat naar de foutmeldingen kan worden verwezen in de onerror
functie. Deze functie wijzigt vervolgens het foutbericht als een bepaalde foutcode wordt geretourneerd.
<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>