GrabzIt's JavaScript API allows all generated HTML elements to be styled with CSS.
Style Images
Image screenshots can be styled using the displayid and displayclass parameters. These parameters dynamically add the id or class attribute respectivley, to the image object. Below a CSS class is assigned to the screenshot image.
<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 can then be specified to style the image, as shown below.
<style>
.MyClass
{
border:1px solid red;
}
</style>
An additional benefit of using these options also allows you to use JavaScript to manipulate the screenshot image. Below the specified id is assigned to the generated image screenshot and then the specified onfinish function is called once the screenshot is loaded. This function then uses the specified id to get the screenshot image and displays its height.
<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>
Style Error Messages
Error messages can be styled using the errorid and errorclass parameters. These parameters dynamically add the id or class attribute respectively to the error message <span> element, while additionally removing the default error style.
<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>
The error message can then be styled, as shown below.
<style>
.MyErrorClass
{
font-weight:bold;
}
</style>
Of course if this is used in combination with the onerror event then the error message can also be manipulated with JavaScript. Below a errorid is specified so that the error message span can be referenced in the onerror function. This function then changes the error message if a certain error code is returned.
<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>