Стиль Скриншоты с JavaScript
JavaScript API GrabzIt позволяет стилизовать все сгенерированные элементы 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 для управления изображением скриншота. Ниже указанного идентификатора присваивается сгенерированный снимок экрана, а затем указанный onfinish Функция вызывается после загрузки скриншота. Затем эта функция использует указанный идентификатор для получения снимка экрана и отображает его высоту.
<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>
Конечно, если это используется в сочетании с OnError событие, то сообщение об ошибке также можно манипулировать с помощью 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>