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

JavaScript

توسط mansoureh در 3 سال پیش
0 1.3k 3 3 سال پیش
mansourehrezamaxbehnamdesigner
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

خوش آمدید

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

لطفا ابتدا لاگین کنید