بزرگ نمایی و کوچک نمایی متن

Javascript

توسط mansoureh در 5 سال پیش
0 49.3k 3 5 سال پیش
mansoureh rezamax behnamdesigner
0

من میخوام چندتا پاراگراف بذارم تو صفحم که وقتی دکمه بزرگنمایی رو میزنم هربار با فشرن دکمه سایز متن من بزرگ و بزرگ تر بشه و وقتی کوچک نمایی رو مفشارم سایز متن من هی کوچیک و کوچیک تر بشه؟

3

درود. 
تست کنید:

<html>
<head>
</head>
<body>
<button id="plustext" >BIGGER</button>
<button id="minustext" >SMALLER</button>
<p id="test" >HELLO WORLD!</p>

<script>
function init(){
	var el = document.getElementById('test');
	
	document.getElementById("plustext").addEventListener("mousedown", function(){
		resizeText(el,5);
	},false);

	document.getElementById("minustext").addEventListener("mousedown", function(){
		resizeText(el,-5);
	},false);
	
}

function css( element, property ) {
    return window.getComputedStyle( element, null ).getPropertyValue( property );
}	 

function resizeText(el, size) {
	var fontSize = parseFloat(css(el,'font-size'));
	el.style.fontSize= fontSize + size + "px";
}

window.addEventListener("load", init);
</script>

</body>
</html>

راستی تو این کد از جاوا اسکریپت خالص استفاده شده یعنی به جی کوئری و امثال اون نیاز نیست.

آخرین ویرایش: 30-06-2015 ساعت 11:17، توسط REza mAX
0

خیلی سپاس گذارم .
ولی این برای من خیلی پیچیده است از این ساده ترم میشه نوشت؟(یعنی فقط با رویدادclickو متد css) البته با انواع متغیرم آشنا هستم

2

با جی کوئری:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { 
	$('#incfont').click(function(){    
		curSize= parseInt($('#content').css('font-size')) + 2;
		if(curSize<=30)
			$('#content').css('font-size', curSize);
	});  
	$('#decfont').click(function(){    
		curSize= parseInt($('#content').css('font-size')) - 2;
		if(curSize>=12)
			$('#content').css('font-size', curSize);
	}); 
});
</script>
</head>
<body>

<div id="content" style="height:260px">
This is a test
</div>
<a href="#" id="incfont">A+</a>
<a href="#" id="decfont">A-</a>
</body>
</html>
آخرین ویرایش: 30-06-2015 ساعت 20:32، توسط Behnam Designer

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.