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

پاسخ
#2
درود. 
تست کنید:
کد:
<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
HAPPY CODING
پاسخ
#3
خیلی سپاس گذارم .
ولی این برای من خیلی پیچیده است از این ساده ترم میشه نوشت؟(یعنی فقط با رویدادclickو متد css) البته با انواع متغیرم آشنا هستم

پاسخ
#4
با جی کوئری:
کد:
<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
پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note آموزش جی کوئری: اضافه کردن المنتهایی به المنت موجود WWWorker 0 330 31-12-2013 ساعت 20:34
آخرین ارسال: WWWorker

کاربرانِ درحال بازدید از این موضوع:   1 مهمان