آموزش ویرایش و اضافه کردن css در مرورگر با استفاده از jquery

در این پست قصد داریم تا نحوه ویرایش و اضافه کردن css به صورت آنلاین در مروگر  را با استفاده از jquery آموزش دهیم.

ابتدا css های زیر را بعد از تگ شروع body بنویسید.

<style type="text/css" id="cssStyle">
    body {
      background-color: #ddd;
      font-family: verdana;
      color: darkviolet;
    }
</style>

در کدهای css بالا چند خط کد css نوشتیم و همچنین یک id به استایل خود اختصاص دادیم.

کدهای jquery

<script type="text/javascript">
    $(function() {
      $('#cssStyle,h1').css({
        'display' : 'block',
        'white-space' : 'pre'
      })
      .attr('contenteditable', true);
    });
</script>

اگر به کدهای jquery بالا نگاه کنید خیلی ساده ابتدا دو css به تگ استایل خود دادیم که display را برابر block و white-space را برابر pre قرار دادیم این کد باعث میشود تا کدهای css را در چندین خط همانند کد نمایش دهد شود و  سپس contenteditable را برابر true قرار دادیم تا قابلیت ویرایش به فایل css و همچنین تگ های h1 اضافه شود.