جاوا اسکرپٹ کی مدد سے ایچ ٹی ایم ایل پر سی ایس ایس اسٹائلز لگائیں

جب ایک ویب پیج کسی براؤزر میں لوڈ ہوتا ہے تو 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