ઉકેલાયેલ: જાવાસ્ક્રિપ્ટ સાથે સીએસએસ વેરીએબલને કેવી રીતે બદલવું

આ પ્રશ્નનો કોઈ એક જ જવાબ નથી કારણ કે બે ભાષાઓ વેરિયેબલ અસાઇનમેન્ટ અને મેનીપ્યુલેશનને અલગ અલગ રીતે સંપર્ક કરે છે. સામાન્ય રીતે કહીએ તો, જોકે, JavaScript સાથે CSS વેરીએબલને બદલવાનો પ્રયાસ કરતી એક સમસ્યા એ છે કે બે ભાષાઓ વેરીએબલ્સને જાહેર કરવા અને ઍક્સેસ કરવા માટે અલગ-અલગ સિન્ટેક્સનો ઉપયોગ કરે છે. વધુમાં, CSS ચલો સામાન્ય રીતે વ્યક્તિગત ઘટક સ્તરને બદલે સ્ટાઇલ શીટ સ્તર પર વ્યાખ્યાયિત કરવામાં આવે છે, જે તેમને JavaScript કોડની અંદરથી ઍક્સેસ કરવાનું મુશ્કેલ બનાવી શકે છે.

var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");

આ કોડ લાઇન CSS વેરીએબલ માટે નવું મૂલ્ય સેટ કરી રહી છે. પ્રથમ લીટી "તત્વ" ના ID સાથે તત્વ મેળવે છે. બીજી લાઇન CSS વેરીએબલ “–variable” ના મૂલ્યને “new-value” પર સેટ કરે છે.

CSS ચલો

CSS વેરીએબલ્સ એ વૈશ્વિક ચલોનો ઉપયોગ કર્યા વિના તમારી CSS ફાઇલોમાં ડેટા સ્ટોર કરવાની શ્રેષ્ઠ રીત છે. તમે તેનો ઉપયોગ વર્તમાન પૃષ્ઠની પહોળાઈ અથવા ઊંચાઈ અથવા વર્તમાન ફોન્ટ કદ જેવી માહિતી સંગ્રહિત કરવા માટે કરી શકો છો.

તમારા JavaScript કોડમાં CSS વેરીએબલનો ઉપયોગ કરવા માટે, તમારે પહેલા તમારા દસ્તાવેજની સ્ટાઇલ શીટમાં css પ્રોપર્ટીનો સમાવેશ કરવાની જરૂર છે. પછી, તમે var કીવર્ડનો ઉપયોગ કરીને ચલને વ્યાખ્યાયિત કરી શકો છો:

var પહોળાઈ = document.getElementById(“myElement”).offsetWidth;

તમે ચલમાંથી વ્યક્તિગત મૂલ્યોને ઍક્સેસ કરવા માટે css પ્રોપર્ટીનો પણ ઉપયોગ કરી શકો છો:

var પહોળાઈ = document.getElementById(“myElement”).offsetWidth; var ઊંચાઈ = document.getElementById(“myElement”).offsetHeight;

CSS નિયંત્રણ

JavaScript માં, CSS ને નિયંત્રિત કરવાની કેટલીક રીતો છે. સીએસએસ પ્રોપર્ટીનો ઉપયોગ કરવાની એક રીત છે. આ ગુણધર્મ તમને તમારા દસ્તાવેજમાં ચોક્કસ તત્વ માટે શૈલી સેટ કરવાની મંજૂરી આપે છે.

CSS ને નિયંત્રિત કરવાની બીજી રીત છે શૈલી ગુણધર્મનો ઉપયોગ કરવો. આ ગુણધર્મ તમને તમારા દસ્તાવેજમાંના તમામ ઘટકો માટે શૈલી સેટ કરવાની મંજૂરી આપે છે.