|
|
|
สอบถามเรื่องการปรับขนาดตัวอักษร หน้าเว็บครับ มี script ตัวอย่าง |
|
|
|
|
|
|
|
ผมใช้ 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 :
1201 |
Reply :
3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองดูตรับ
<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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมอ่านโจทย์ผิดไปนิดครับ ขอแก้ตัวใหม่
<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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เขียนแบบ 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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 01
|