ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด
ของเว็บผู้จัดการไม่แน่ใจ คำสั่ง javascript setStyle() แล้วให้มันไปเซ็ทเป็น cookie ซึ่ง cookie ตัวนี้จะไปกำหนดลิ้งไฟล์ css ที่ต้องดึงมาใช้ในหน้านั้นๆ ถ้า small ก็เปิดไฟล์ css_S.css ถ้าเป็น large ก็เปิด css_L.css
function InitStyle()
{
var strCss = getCookie("css");
if(typeof(strCss) == "undefined")
strCss = "Normal";
if(strCss == "Small")
document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css" disabled>');
if(strCss == "Normal")
document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css" disabled>');
if(strCss == "Large")
document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css" disabled>');
if(strCss == "ExtraLarge")
document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css" disabled>');
return true;
}
function SetStyle(strName)
{
var intCount;
for(intCount = 0;intCount < document.styleSheets.length; intCount++) {
if(document.styleSheets[intCount].title == strName)
document.styleSheets[intCount].disabled = false;
else
document.styleSheets[intCount].disabled = true;
}
setCookie("css", strName, 30, "/", null);
}
ที่หน้านั้นก็เรียก
<link rel="stylesheet" title="Mocked" href="/css/css.css" type="text/css" disable>
กับ
<SCRIPT LANGUAGE="JavaScript" SRC="/JavaScript/Style.js"></SCRIPT>
และลืมใส่อันนี้จนได้
<SCRIPT LANGUAGE="JavaScript">
InitStyle();
</SCRIPT>
ลืมคำสั่งที่ปุ่ม
<a href="Small%20Style" onclick="SetStyle('Small'); return false;" > <img name="imgSmallCss" src="http://www.manager.co.th/images/SmallCss.gif" border="0" height="23" width="13"></a>อาจจะส่งตัวแปรหลายทอดไปหน่อย
แต่ถ้าจะเอาโค้ดอย่างง่ายๆ ก็
<html>
<head>
<title>Untitled</title>
<script>
function setStyle(a) {
switch (a) {
case "tt1" : {
document.getElementById('plaintext').style.fontSize="10pt";
break;
}
case "tt2" : {
document.getElementById('plaintext').style.fontSize="12pt";
break;
}
case "tt3" : {
document.getElementById('plaintext').style.fontSize="14pt";
break;
}
}
}
</script>
</head>
<body>
<input type="button" value="1" onclick="setStyle('tt1')">
<input type="button" value="2" onclick="setStyle('tt2')">
<input type="button" value="3" onclick="setStyle('tt3')">
<br><span id="plaintext">
This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.
This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.
A reference to all of the HTML DOM objects are listed in the menu to the left.</span>
</body>
</html>
โค้ดอันนี้ก็ตรงไปตรงมา
เซ็ท id ให้กับข้อความว่า plaintext
มีปุ่มสามปุ่ม ปุ่มแรกถ้ากดก็ให้ไปเรียก function จาก javascript ชื่อ setStyle (ขอยืมใช้ชื่อฟังก์ชั่นผู้จัดการละกัน) โดยให้กำหนดค่าเป็น tt1
ปุ่มที่สองก็เป็น tt2 แล้วปุ่มที่สามเป็น tt3
ตัวฟังก์ชั่น setStyle() ก็ให้รับค่าเข้ามา
ตัวแปร a คือตัวที่จะรับค่าเข้ามาในฟังก์ชั่น
จากนั้้นในฟังก์ชั่นก็ให้ตรวจสอบตัวแปร a ด้วย switch
ถ้าเป็น tt1 ให้เปลี่ยนขนาดฟอนต์ของ id plaintext เป็น 10pt
document.getElementById('plaintext').style.fontSize="10pt";
