GrabzIt ની જાવાસ્ક્રિપ્ટ API બધા પેદા HTML તત્વોને CSS સાથે રીતની કરવાની મંજૂરી આપે છે.
ઇમેજ સ્ક્રીનશોટ ની મદદથી સ્ટાઇલ કરી શકાય છે displayid
અને displayclass
પરિમાણો. આ પરિમાણો ગતિશીલ રૂપે ઇમેજ toબ્જેક્ટમાં 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",
{"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>
સીએસએસ પછી નીચે બતાવ્યા પ્રમાણે, છબીને સ્ટાઇલ કરવા માટે સ્પષ્ટ કરી શકાય છે.
<style> .MyClass { border:1px solid red; } </style>
આ વિકલ્પોનો ઉપયોગ કરવાનો એક વધારાનો ફાયદો તમને સ્ક્રીનશોટ ઇમેજની ચાલાકી માટે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવાની પણ મંજૂરી આપે છે. નિર્દિષ્ટ ID ની નીચે જનરેટ કરેલા ઇમેજ સ્ક્રીનશshotટને સોંપેલ છે અને પછી ઉલ્લેખિત onfinish એકવાર સ્ક્રીનશોટ લોડ થયા પછી ફંક્શન કહેવામાં આવે છે. આ ફંક્શન પછી સ્ક્રીનશોટ ઇમેજ મેળવવા માટે ઉલ્લેખિત આઈડીનો ઉપયોગ કરે છે અને તેની 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>
ભૂલ સંદેશાઓનો ઉપયોગ કરીને સ્ટાઇલ કરી શકાય છે errorid
અને errorclass
પરિમાણો. આ પરિમાણો ગતિશીલ રીતે ભૂલ સંદેશામાં અનુક્રમે ID અથવા વર્ગ લક્ષણ ઉમેરશે <span>
તત્વ, જ્યારે ડિફ defaultલ્ટ ભૂલ શૈલીને દૂર કરતી વખતે.
<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>
અલબત્ત જો આ સાથે સંયોજનમાં વપરાય છે ઓનરરર ઇવેન્ટ પછી એરર મેસેજ જાવાસ્ક્રિપ્ટ દ્વારા પણ ચાલાકીથી ભરી શકાય છે. નીચે એ 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>