1

أرجو المساعدة في CSS و JavaScript و @media

السلام عليكم

CSS

@media only screen and (max-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 30%;
    }
}
@media only screen and (min-width: 768px) {
    #grandImg{
        right: 20%;
        bottom: 5%;
    }
}

JavaScript

var button_v = document.getElementById("v");

أريد عند الضغط على الزر button_v أن يتغير كود CSS أعلاه إلى:

@media only screen and (max-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 5%;
    }
}
@media only screen and (min-width: 768px) {
    #grandImg{
        right: 0;
        bottom: 5%;
    }
}

وعند إعادة الضغط على الزر يعود كود CSS إلى ما كان عليه

كود CSS موجود في ملف خارجي

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

2
zakariamouhid أضف ردا

الحل

function med(t) {
    "use strict";
    if (t) {
        document.body.style.backgroundColor = "#009688";
    } else {
        document.body.style.backgroundColor = "#F44336";
    }
}
med(document.body.clientWidth <= 768);
window.matchMedia('(max-width: 768px)').addListener(function (data) {
    "use strict";
    med(data.matches);
});
1
مبرمج بسيط أضف ردا

هل تريد العمل بـ Javascript ام ليست بمشكلة استخدام jQuery ؟

0
zakariamouhid أضف ردا

إن كانت ب JavaScript أفضل لاكن لا مشكلة في ب jQuery

0
zakariamouhid أضف ردا

شكرا لك أخي لقد تم حل المشكل

1
15rayman أضف ردا

يمكن عمل الأمر بطريقتين إما ان تضع كود ال css بداخل function ثم تطبيق الأمر عند الضغط .

ويمكن ايضا عمل css منفصل عن الدالة ثم استدعاءه عند الضغط عبر ال jquery لا أعلم كيف أضيف الأكواد هنا على حسوب i/o هذا رابط ربما يمكنه مساعدتك في ما تبحث عنه

1
Smaily أضف ردا

لا أعلم كيف أضيف الأكواد هنا على حسوب i/o

 أترك خمس فراغات وابدأ الكتابة
0
zakariamouhid أضف ردا

تكفي أربع فراغات

0
zakariamouhid أضف ردا

لاكن لن تعمل ال media query وهذا هو المشكل

1
15rayman أضف ردا

ابحث عن window.matchMedia في العم جوجل

0
zakariamouhid أضف ردا

ال window.matchMedia('only screen and (max-width: 768px)').matches لا يبقى يتحقق من الشرط دائما

ففي ال CSS في كل مرة يتغير حجم الشاشة يتم التحقق تلقائيا من الشرط

يمكن جعل JavaScript يتحقق دائما من الشرط

باستخدام onresize لاكنه ليس سريعا مثل ال media query في CSS

0
zakariamouhid أضف ردا

شكرا لك أخي

وجدت هذا هو الكود

var media = window.matchMedia('(min-width: 500px)');
media.addListener(function (data) {
    "use strict";
    console.log('matches: ' + data.matches);
});

هكذا يتحقق دائما من الشرط :)