GrabzItのJavaScript APIを使用すると、生成されたすべてのHTML要素をCSSでスタイル設定できます。
画像のスクリーンショットは、 displayid および displayclass パラメーター。 これらのパラメーターは、idまたはclass属性を動的に画像オブジェクトに追加します。 以下 CSS クラスはスクリーンショット画像に割り当てられます。
displayid
displayclass
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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を使用してスクリーンショット画像を取得し、その高さを表示します。
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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> 要素、さらにデフォルトのエラースタイルを削除します。
errorid
errorclass
<span>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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 関数。 この関数は、特定のエラーコードが返された場合、エラーメッセージを変更します。
onerror
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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>