جب ایک ویب پیج کسی براؤزر میں لوڈ ہوتا ہے تو HTML پر لگائے گئے CSS رولز بھی اس کے ساتھ لوڈ ہوتے ہیں۔ یہ اسٹائل رولز ویب پیج کے ساتھ منسلک کی گئی اسٹائل شیٹ فائل میں بھی ہو سکتے ہیں، ویب پیج کے head ٹیگ کے اندر موجود style ٹیگ میں بھی ہو سکتے ہیں، اور HTML کے کسی انفرادی ٹیگ کے اندر بھی ہو سکتے ہیں۔ جونہی ویب پیج لوڈ ہوتا ہے براؤزر HTML پر CSS رولز اپلائی کر کے یہ ویب پیج صارف کو دکھا دیتا ہے۔ اگر آپ چاہتے ہیں کہ آپ کی ایپلی کیشن کا صارف ویب پیجز کے منتخب اسٹائلز اپنی مرضی سے تبدیل کر سکے، تو اس کام کے لیے Javascript استعمال کیا جا سکتا ہے جو ویب پیج کو دوبارہ لوڈ کیے بغیر فوری طور پر مطلوبہ CSS اسٹائلز HTML پر لگا دیتا ہے اور براؤزر اس تبدیلی کو فوراً دکھا دیتا ہے۔
اس ٹٹوریل میں پہلے ایک مثال کے ذریعہ یہ سارا عمل واضح کیا جائے گا، اس کے بعد CSS کے متبادل Javascript کی چند اہم پراپرٹیز کی فہرست پیش کی جائے گی تاکہ آپ ان دونوں کے درمیان Syntax کا فرق بھی جان لیں اور حسب منشا انہیں استعمال بھی کرسکیں۔
درج ذیل لنکس پر ترتیب وار کلک کریں اور نیچے نتیجہ دیکھیں:
- مکمل عبارت کے پیچھے رنگ تبدیل کریں اور اردگرد گول بارڈر لگائیں۔
- لکھائی اور تصویر کو آمنے سامنے لائیں اور تصویر کے کنارے گول کریں۔
- اقتباس کی لکھائی کا سائز تبدیل کریں۔
- ایلیمنٹس کو واپس پرانی حالت میں لے جائیں۔
1940ء میں اقبال ڈے منایا گیا اور اس میں قائد اعظم مرحوم نے فرمایا:
اگر میں ہندوستان میں ایک مثالی اسلامی ریاست کے حصول تک زندہ رہا اور اس وقت مجھے یہ اختیار دیا گیا کہ میں اقبال کا کلام اور اس مسلم ریاست کی حکمرانی میں سے ایک کا انتخاب کر لوں تو میں اقبال کے کلام کو ترجیح دوں گا۔
کوڈ کی وضاحت
HTML کوڈ کی وضاحت: کامنٹس کی لائنوں کے ساتھ نمبر دیے گئے ہیں، ان نمبروں کے لحاظ سے وضاحت دیکھیں:
- پہلے چار لنکس ہیں، ہر لنک پر کلک کرنے سے Javascript کا ایک فنکشن کال ہوگا۔ ان فنکشنز کے اندر ہم نے HTML ایلیمنٹس پر CSS اسٹائلز لگائے ہیں۔
- quote-wrapper کے id کے ساتھ ایک div ٹیگ ہے۔ اس div ٹیگ کے اندر پہلے ایک img ٹیگ ہے، اس کے بعد ایک پیراگراف کا p ٹیگ ہے، اور پھر blockquote ٹیگ ہے۔ Javascript کوڈ میں:
- div ٹیگ کو ہم id کی مدد سے سلیکٹ کریں گے،
- img ٹیگ کو class کی مدد سے سلیکٹ کریں گے،
- اور blockquote کو ٹیگ کے نام سے سلیکٹ کریں گے۔
ہم یہ بھی کر سکتے ہیں کہ سب ایلیمنٹس کو الگ سے id مہیا کر دیں، اور ہر ایلیمنٹ کے id کو استعمال کرتے ہوئے اسٹائلز لگائیں، لیکن یہاں ہم یہ سمجھنا چاہتے ہیں Javascript کی مدد سے HTML ایلیمنٹس کن مختلف طریقوں سے سلیکٹ کیے جا سکتے ہیں۔
<body> <!-- 1. Links that make javascript function calls --> <ul> <li><a href="#" onclick="styleQuoteWrapper();return false;">مکمل عبارت کے پیچھے رنگ تبدیل کریں اور اردگرد گول بارڈر لگائیں۔</a></li> <li><a href="#" onclick="styleImage();return false;">لکھائی اور تصویر کو آمنے سامنے لائیں اور تصویر کے کنارے گول کریں۔</a></li> <li><a href="#" onclick="styleQuote();return false;">اقتباس کی لکھائی کا سائز تبدیل کریں۔</a></li> <li><a href="#" onclick="resetStyles();return false;">ایلیمنٹس کو واپس پرانی حالت میں لے جائیں۔</a></li> </ul> <br> <!-- 2. These are the HTML elements on which CSS styles will be applied --> <div id="quote-wrapper"> <img class="quote-image" src="a-waving-pakistan-flag.jpg"> <p> 1940ء میں اقبال ڈے منایا گیا اور اس میں قائد اعظم مرحوم نے فرمایا:</p> <blockquote>اگر میں ہندوستان میں ایک مثالی اسلامی ریاست کے حصول تک زندہ رہا اور اس وقت مجھے یہ اختیار دیا گیا کہ میں اقبال کا کلام اور اس مسلم ریاست کی حکمرانی میں سے ایک کا انتخاب کر لوں تو میں اقبال کے کلام کو ترجیح دوں گا۔</blockquote> </div> </body>
Javascript کوڈ کی وضاحت: درج ذیل کوڈ میں آپ دیکھ رہے ہیں کہ جاوا اسکرپٹ کے تمام فنکشنز script ٹیگ کے اندر لکھے گئے ہیں۔ یہ script ٹیگ ویب پیج کے head ٹیگ کے اندر رکھا جاتا ہے۔
- پہلا فنکشن ()styleQuoteWrapper ہے جس میں سب سے پہلے ہم نے div ٹیگ کو id کے ذریعے سلیکٹ کر کے quote_wrapper ویری ایبل میں رکھا ہے۔ پھر اس ویری ایبل کو بطور ہینڈل استعمال کرتے ہوئے اس div پر مختلف CSS اسٹائلز لگائے ہیں۔ مثلاً CSS پراپرٹی background-color کے متبادل Javascript کی پراپرٹی backgroundColor استعمال کی گئی ہے۔ جب CSS اسٹائلز Javascript کے ذریعے لگائے جاتے ہیں تو CSS پراپرٹی کی درمیان والی ڈیش ختم کر کے دوسرے لفظ کا پہلا حرف انگلش کے بڑے حرف کے طور پر لکھا جاتا ہے، جیسا کہ آپ باقی پراپرٹیز میں دیکھ رہے ہیں۔
- دوسرا فنکشن ()styleImage ہے۔ چونکہ CSS کی class ویب پیج میں ایک سے زیادہ ایلیمنٹس پر استعمال کی جا سکتی ہے اس لیے جب Javascript کے ذریعے ہم HTML ایلیمنٹس class کے ذریعے سلیکٹ کرتے ہیں تو انہیں استعمال کرنے کے لیے ہمیں variable کی بجائے ایک array چاہیے ہوتا ہے۔ چنانچہ اس فنکشن میں quote-image کی class استعمال کرنے والے ایلیمنٹس کو images_array میں رکھا گیا، اور پھر array کے پہلے ایلیمنٹ کو 0 انڈیکس کی مدد سے سلیکٹ کر کے اس پر CSS اسٹائل لگائے گئے ہیں۔
نوٹ: class کی مدد سے HTML ایلیمنٹس کو سلیکٹ کرنے کی سہولت پرانے براؤزرز میں موجود نہیں ہے۔ - تیسرا فنکشن ()styleQuote ہے۔ اس میں ویب پیج میں موجود تمام blockquote ایلیمنٹس کو ٹیگ کے نام (TagName) کے ذریعے سلیکٹ کر کے ایک Loop کی مدد سے ان پر CSS اسٹائلز لگائے گئے ہیں۔ چنانچہ اس فنکشن میں لگائے گئے CSS اسٹائلز ویب پیج میں موجود تمام blockquote ایلیمنٹس پر لگ جائیں گے۔
- چوتھا فنکشن ()resetStyles ہے جس کی مدد سے پچھلے فنکشنز میں لگائے گئے CSS اسٹائلز کو غیر مؤثر کیا گیا ہے۔
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> // 1. Apply styles to element with 'quote-wrapper' id function styleQuoteWrapper() { var quote_wrapper = document.getElementById("quote-wrapper"); quote_wrapper.style.direction = "rtl"; quote_wrapper.style.backgroundColor = "lightgreen"; quote_wrapper.style.borderWidth = "8px"; quote_wrapper.style.borderStyle = "solid"; quote_wrapper.style.borderColor = "green"; quote_wrapper.style.borderRadius = "10px"; quote_wrapper.style.marginTop = "10px"; quote_wrapper.style.padding = "15px"; quote_wrapper.style.boxShadow = "4px 4px 5px #BBBBBB"; } // 2. Apply styles to all elements with 'quote-image' class function styleImage() { var images_array = document.getElementsByClassName("quote-image"); images_array[0].style.cssFloat = "left"; images_array[0].style.borderRadius = "35px"; images_array[0].style.marginRight = "15px"; images_array[0].style.marginBottom = "15px"; } // 3. Apply styles to all <blockquote> elements in the document function styleQuote() { var blockquotes_array = document.getElementsByTagName("blockquote"); for (var i = 0; i < blockquotes_array.length; i++) { blockquotes_array[i].style.fontSize = "150%"; blockquotes_array[i].style.lineHeight = "150%"; } } // 5. Reset styles function resetStyles() { // Reset quote-wrapper styls document.getElementById("quote-wrapper").style.backgroundColor = "inherit"; document.getElementById("quote-wrapper").style.border = "none"; document.getElementById("quote-wrapper").style.boxShadow = "none"; document.getElementById("quote-wrapper").style.margin = "0"; document.getElementById("quote-wrapper").style.padding = "0"; document.getElementById("quote-wrapper").style.direction = "inherit"; // Reset quote-image styles document.getElementsByClassName("quote-image")[0].style.borderRadius = "0"; document.getElementsByClassName("quote-image")[0].style.cssFloat = "none"; // Reset <blockquote> styles document.getElementsByTagName("blockquote")[0].style.fontSize = "inherit"; document.getElementsByTagName("blockquote")[0].style.lineHeight = "inherit"; } </script> </head>
CSS پراپرٹیز کے متبادل Javascript پراپرٹیز
CSS Property | JavaScript Reference |
---|---|
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-position | backgroundPosition |
background-repeat | backgroundRepeat |
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border-color | borderColor |
border-left | borderLeft |
border-left-color | borderLeftColor |
border-left-style | borderLeftStyle |
border-left-width | borderLeftWidth |
border-right | borderRight |
border-right-color | borderRightColor |
border-right-style | borderRightStyle |
border-right-width | borderRightWidth |
border-style | borderStyle |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
border-width | borderWidth |
clear | clear |
clip | clip |
color | color |
cursor | cursor |
display | display |
filter | filter |
font | font |
font-family | fontFamily |
font-size | fontSize |
font-variant | fontVariant |
font-weight | fontWeight |
height | height |
left | left |
letter-spacing | letterSpacing |
line-height | lineHeight |
list-style | listStyle |
list-style-image | listStyleImage |
list-style-position | listStylePosition |
list-style-type | listStyleType |
margin | margin |
margin-bottom | marginBottom |
margin-left | marginLeft |
margin-right | marginRight |
margin-top | marginTop |
overflow | overflow |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
page-break-after | pageBreakAfter |
page-break-before | pageBreakBefore |
position | position |
float | styleFloat |
text-align | textAlign |
text-decoration | textDecoration |
text-decoration: blink | textDecorationBlink |
text-decoration: line-through | textDecorationLineThrough |
text-decoration: none | textDecorationNone |
text-decoration: overline | textDecorationOverline |
text-decoration: underline | textDecorationUnderline |
text-indent | textIndent |
text-transform | textTransform |
top | top |
vertical-align | verticalAlign |
visibility | visibility |
width | width |
word-spacing | wordSpacing |
z-index | zIndex |
Modified: Fri, 05/11/2018 - 16:20