تغییر محتوای html و css با دستورات جاوا اسکریپت

تغییر محتوای html و css با دستورات جاوا اسکریپت

جهت تغییر محتوای html و css توسط دستورات جاوا اسکریپت چند راه وجود داره که میتونید استفاده کنید.

استفاده از دستور innerHtml جهت تغییر محتوای Html

خب یکی از دستوراتی که میتونید توسط اون محتوای Html رو تغییر بدید دستور innerHtml می باشد. استفاده از این دستور بسیار ساده هست. در ادامه با ذکر یک مثال نحوه استفاده از این دستور را نشان می دهم.

<div style='background-color:green;' id='mydiv'>
    موجود
</div>
<button id='btnPurch'>خرید</button>

<script>
    document.getElementById('btnPurch').onclick=function(){
        document.getElementById('mydiv').innerHtml = 'ناموجود';
    }
</script>

همانطوری که در مثال بالا می بینید با کلیک کردن روی button محتوای تگ mydiv را توسط دستور innerHtml تغییر می دهیم. البته دستور innerHtml علاوه بر تغییر محتوا قابلیت افزودن یا تغییر خود تگ را نیز دارد. از این رو دستور قدرتمندی می باشد. به مثال زیر توجه کنید. در مثال زیر با کلیک کردن روی دکمه تگ div را به یک تگ span جایگرین کرده ایم.

<div style='background-color:green;' id='mydiv'>
    موجود
</div>
<button id='btnPurch'>خرید</button>

<script>
    document.getElementById('btnPurch').onclick=function(){
        document.getElementById('mydiv').innerHtml = '<span>ناموجود</span>';
    }
</script>

تغییر محتوای تگ div توسط دستور text

با توجه به اینکه تگ شما div می باشد می توانید توسط دستور text هم محتوای درون این تگ را تغییر دهید. به مثال زیر توجه کنید.

<div style='background-color:green;' id='mydiv'>
    موجود
</div>
<button id='btnPurch'>خرید</button>

<script>
    document.getElementById('btnPurch').onclick=function(){
        document.getElementById('mydiv').text('ناموجود');
    }
</script>

در مثال بالا توسط دستور text محتوای تگ div را تغییر داده ایم.

تغییر استایل css توسط دستورات جاوا اسکریپت 

برای تغییر استایل های یک تگ توسط دستورات جاوا اسکریپت می توانید از متد css در جاوا اسکریپت استفاده کنید. مثال زیر نحوه استفاده از این متد را نمایش می دهد.

<div style='background-color:green;' id='mydiv'>
    موجود
</div>
<button id='btnPurch'>خرید</button>

<script>
    document.getElementById('btnPurch').onclick=function(){
        document.getElementById('mydiv').css('background-color','red');
    }
</script>

به همین راحتی میتونید استایل ها رو توسط دستورات جاوا اسکریپت تغییر بدید.

Get and Set CSS Classes