• بزرگ نمایی و کوچک نمایی متن
    #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 425 31-12-2013 ساعت 20:34
    آخرین ارسال: WWWorker

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