Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

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

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

เริ่มหัวข้อใหม่

Jumyut

โพสกระทู้ ( 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

Date : 2015-10-21 20:07:06

By : Jumyut

View : 1128

Reply : 3

No. 1

Unidentifier

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

ลองดูตรับ

<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

Unidentifier

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

ผมอ่านโจทย์ผิดไปนิดครับ ขอแก้ตัวใหม่

<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

Unidentifier

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

เขียนแบบ 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 ตัวอย่าง

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก