GrabzIt的JavaScript API允許使用CSS對所有生成的HTML元素進行樣式設置。
可以使用 displayid
及 displayclass
參數。 這些參數將id或class屬性分別添加到圖像對象。 下一個 的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分配給生成的圖像屏幕截圖,然後將指定的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>