क्या सीएसएस के अंदर गणित करना संभव है?

Question

मेरे पास jquery accorion id #accordion है और हेडर क्लास नाम .simpleColor के अंदर की कुछ सामग्री है। अब मैं एक नमूना मार्जिन को .simpleColor देना चाहता हूं। छद्म में ... यह कुछ इस तरह लग रहा है,

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
} 

मैं ऐसे जावास्क्रिप्ट इस लक्ष्य को हासिल करने के लिए करता है, तो यह संभव है के रूप में किसी भी अन्य तकनीक का उपयोग करने के लिए खुला रहा हूँ।

Answer 1

वहाँ एक सीएसएस calc बुलाया समारोह है कि बहुत अच्छी समर्थन प्राप्त करने शुरू कर रहा है है में। वाक्य रचना का पालन के रूप में काम करता है:

width: calc(50% - 100px); 

(ध्यान दें कि ऑपरेटरों के आसपास खाली स्थान के महत्वपूर्ण है)

यह सीएसएस में सच गतिशील कम्प्यूटेशनल समर्थन अनुमति देता है। एक प्रीप्रोसेसर के साथ, आप स्थिर लंबाई के साथ स्थिर लंबाई, और सापेक्ष लंबाई के साथ सापेक्ष लंबाई जोड़ सकते हैं।

कैलक 1 9 क्रोम, फ़ायरफ़ॉक्स 4 और आईई 9 के बाद से समर्थित है। यह सुविधा व्यापक रूप से इसका व्यापक रूप से उपयोग करने के लिए पर्याप्त रूप से समर्थित नहीं है, लेकिन यह भविष्य में बहुत दूर नहीं होगी और यह याद रखने और इसके लिए तत्पर हैं।

Answer 2

आप अन्य तकनीक का उपयोग करने के लिए खुला रहे हैं, कम उपयोग करने का प्रयास: http://lesscss.org/

Answer 3

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px'); 

चाहिए कि आप क्या चाहते रहे हैं। लेकिन आपको जावास्क्रिप्ट में ऐसा कुछ करने की ज़रूरत है, आप इसे शुद्ध सीएसएस में नहीं कर सकते हैं जब तक कि #accordian और .simpleColor की चौड़ाई अग्रिम में ज्ञात न हो (और इस प्रकार अग्रिम में गणना की जाती है)।

Answer 4

सीएसएस के अंदर गणितीय परिचालनों को मूल रूप से करना संभव नहीं है। आप पृष्ठ लोड पर सीएसएस गुणों को बदलने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन यह एक दर्द है और आपके पृष्ठ को धीमा करने के लिए प्रत्येक पेज लोड किया जाना चाहिए।

आपको LESS, Stylus, या SASS जैसे सीएसएस प्रीप्रोसेसर का उपयोग करने की आवश्यकता होगी।

इन भाषाओं में से किसी एक का उपयोग करने का बोनस यह है कि आप उनसे वास्तविक सीएसएस स्टाइलशीट उत्पन्न कर सकते हैं। आपको फ़ंक्शंस, मिक्सिन, वेरिएबल, आदि जैसे लाभ भी मिलते हैं।

Answer 5

मेरा मानना ​​है कि सीएसएस शुद्ध शैली परिभाषा होना चाहिए। मैं इसके साथ कुछ गणना मिश्रण करना पसंद नहीं करता। मुझे क्या करना होता है कि मेरी जावास्क्रिप्ट

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft); 

कार्य नमूना http://jsfiddle.net/mzTRw/19/

Answer 6

इस उदाहरण को देखें .. उन्होंने सीएसएस में बहुत गणित का उपयोग किया है।

http://codepen.io/schoenwaldnils/pen/DLiyr