Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,036

HOME > Client Script Forum > สอบถามเรื่องการปรับขนาดตัวอักษร หน้าเว็บครับ มี script ตัวอย่าง



 

สอบถามเรื่องการปรับขนาดตัวอักษร หน้าเว็บครับ มี script ตัวอย่าง

 



Topic : 119504



โพสกระทู้ ( 139 )
บทความ ( 0 )



สถานะออฟไลน์




ผมใช้ script ตัวนี้
Code
<input type='button' value='Big' /> <input type='button' value='Normal' /> <input type='button' value='Small' />



Code (JavaScript)
<script type="text/javascript">
	$(document).ready(function(){
		 
		$('input').click(function(){
		 
			resizeFont($(this));
		 
		});
		 
		function resizeFont( object ) {
			 
			var o = object.val();
			var p = $('section, nav, ul, h3, h4, h5, p, span');
			 
			switch( o ) {
				case "Big"      : p.css('font-size',22); break;
                              case "Normal"   : p.css('font-size',14); break;
                              case "Small"    : p.css('font-size',10); break; 
			}
			 
		}
	 
	});
</script>


ุ้ถ้าผมต้องการให้ขนาดตัวอักษรกลับมามีขนากปกติตามที่ css เดิมตั้งไว้ผมต้องเขียนยังไงครับ

ขอบคุณครับ



Tag : HTML/CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-10-21 20:07:06 By : Jumyut View : 1201 Reply : 3
 

 

No. 1



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ลองดูตรับ
<style type='text/css'>
div.adjustFontSize{
    display:inline-block;
    padding:0.2em;
    width:95px;
    text-align:center;
}
</style>
<script type='text/javascript'>
var doc = document;
var small = doc.getElementById('small'),
    normal =  doc.getElementById('normal'),
    large =  doc.getElementById('large'),
    paragraph =  doc.getElementById('display');

    small.addEventListener("click",function(){
	paragraph.style.fontSize='small';
    });

    normal.addEventListener("click",function(){
	paragraph.style.fontSize='medium';
    });

    large.addEventListener("click",function(){
	paragraph.style.fontSize='x-large';
    });
</script>

<div class='adjustFontSize' id='small'>Small</div>
<div class='adjustFontSize' id='normal'>Normal</div>
<div class='adjustFontSize' id='large'>Large</div>
<p id='display'>
    ถ้าผมต้องการให้ขนาดตัวอักษรกลับมามีขนากปกติตามที่ css เดิมตั้งไว้ผมต้องเขียนยังไงครับ ขอบคุณครับ
</p>







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-10-22 03:41:32 By : sakuraei
 


 

No. 2



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ผมอ่านโจทย์ผิดไปนิดครับ ขอแก้ตัวใหม่
<style type='text/css'>
div.adjustFontSize{
    display:inline-block;
    padding:0.2em;
    width:95px;
    text-align:center;
}
#display {
    font-size:22px;
}
</style>
<script type='text/javascript'>
var doc = document;
var small = doc.getElementById('small'),
    normal =  doc.getElementById('normal'),
    large =  doc.getElementById('large'),
    origin =  doc.getElementById('origin'),    
    paragraph =  doc.getElementById('display');
var originSize =  window.getComputedStyle(paragraph).getPropertyValue('font-size');

small.addEventListener("click",function(){
	paragraph.style.fontSize='small';
});

normal.addEventListener("click",function(){
	paragraph.style.fontSize='medium';
});

large.addEventListener("click",function(){
	paragraph.style.fontSize='x-large';
});
origin.addEventListener("click",function(){
	paragraph.style.fontSize=originSize;
});
</script>

<div class='adjustFontSize' id='small'>Small</div>
<div class='adjustFontSize' id='normal'>Normal</div>
<div class='adjustFontSize' id='large'>Large</div>
<div class='adjustFontSize' id='origin'>Origin</div>
<p id='display'>
    ถ้าผมต้องการให้ขนาดตัวอักษรกลับมามีขนากปกติตามที่ css เดิมตั้งไว้ผมต้องเขียนยังไงครับ ขอบคุณครับ
</p>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-10-22 04:03:06 By : sakuraei
 

 

No. 3



โพสกระทู้ ( 3,156 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


เขียนแบบ jquery สั้นกว่า แต่เร็วสู้แบบข้างบนไม่ได้ http://jsfiddle.net/5Lysngvm/
<style type='text/css'>
div.adjustFontSize{
    display:inline-block;
    padding:0.2em;
    width:95px;
    text-align:center;
}
#display {
    font-size:22px;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    
	var adjust = $("div.adjustFontSize"),
    	p = $("#display").addClass("origin-display");    
	var cssFontSize = p.css('fontSize');
 
    adjust.on("click",function(){
        var fsize = $(this).attr('fontSize');alert(fsize);
    	if(typeof  fsize !== 'undefined')
            p.css('fontSize',fsize);
        else
            p.css('fontSize',cssFontSize);
    });
});
</script>
<div class='adjustFontSize' fontSize='small'>Small</div>
<div class='adjustFontSize' fontSize='medium'>Normal</div>
<div class='adjustFontSize' fontSize='large'>Large</div>
<div class='adjustFontSize'>Origin</div>
<p id='display'>
    ถ้าผมต้องการให้ขนาดตัวอักษรกลับมามีขนากปกติตามที่ css เดิมตั้งไว้ผมต้องเขียนยังไงครับ ขอบคุณครับ
</p>



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2015-10-22 09:25:07 By : sakuraei
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเรื่องการปรับขนาดตัวอักษร หน้าเว็บครับ มี script ตัวอย่าง
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่