jQuery/जावास्क्रिप्ट: एक आसान तरीके से पिक्सल को एम में परिवर्तित करें

Question

मैं कुछ पिक्सेल मानों को एम मानों में परिवर्तित करने के लिए, मेरी प्लगइन में कोड की एक पंक्ति जोड़ने का एक आसान तरीका ढूंढ रहा हूं, क्योंकि मेरे लेआउट परियोजना ईएमएस में होना चाहिए। ऐसा करने का कोई आसान तरीका है, क्योंकि मैं साइट पर कोई तृतीय-पक्ष प्लगइन नहीं जोड़ना चाहता हूं।

यहां कोड पोस्ट नहीं करेगा, क्योंकि इसमें प्लगइन के साथ कुछ भी नहीं है।

धन्यवाद।

उदाहरण: 13px -> ?? उन्हें

Answer 1

पिक्सल और ईएमएस यूनिट के मौलिक रूप से अलग प्रकार के होते हैं। आप बस उनके बीच परिवर्तित नहीं कर सकते हैं।

उदाहरण के लिए, एक साइट पर 16px के डिफ़ॉल्ट फ़ॉन्ट आकार वाले उपयोगकर्ता जहां शीर्ष-स्तरीय शीर्षलेख 200% फ़ॉन्ट आकार पर स्टाइल किए जाते हैं, 1em 32px के बराबर हो सकता है। दस्तावेज़ में कहीं और शीर्षक ले जाएं, यह 64px या 16px हो सकता है। एक ही दस्तावेज़ को एक अलग उपयोगकर्ता को दें, यह 30/60/15 पीएक्स हो सकता है। एक अलग तत्व के बारे में बात करना शुरू करें, और यह फिर से बदल सकता है।

सबसे नज़दीक आप जो चाहते हैं वह पिक्सेल से ईएमएस + दस्तावेज़ + संदर्भ + सेटिंग्स में कनवर्ट करना है। लेकिन अगर किसी ने आपको ईएमएस के साथ अपनी परियोजना को पेश करने के लिए कहा है, तो शायद वे खुश नहीं होंगे कि आप इसे पिक्सेल में "कनवर्ट करना" करने की कोशिश कर रहे हैं।

Answer 2

ईएमएस किसी भी तरह से पिक्सेल के बराबर नहीं है। वे एक सापेक्ष माप हैं।

<span style="font-size: 1em;">This is 1em font size, which means the text is the same size as the parent</span> 

<span style="font-size: 1.5em;">This is 1.5em font size, which means the text is 150% the size as the parent</span> 

आधार आकार उपयोगकर्ता-एजेंट (ब्राउज़र) द्वारा निर्धारित किया जाता है। हालांकि यह माता पिता की font-size पर आधारित है

Answer 3

निम्नलिखित, आप की आवश्यकता के रूप में कर रहा है, और तत्व ही की, px में लौटाए जाने:

function px2em(elem) { 
    var W = window, 
     D = document; 
    if (!elem || elem.parentNode.tagName.toLowerCase() == 'body') { 
     return false; 
    } 
    else { 
     var parentFontSize = parseInt(W.getComputedStyle(elem.parentNode, null).fontSize, 10), 
      elemFontSize = parseInt(W.getComputedStyle(elem, null).fontSize, 10); 

     var pxInEms = Math.floor((elemFontSize/parentFontSize) * 100)/100; 
     elem.style.fontSize = pxInEms + 'em'; 
    } 
} 

JS Fiddle proof of concept।

नोट्स:

• समारोह झूठी देता है, अगर तत्व आप em में बदलने की कोशिश कर रहे हैं body है, कि हालांकि, क्योंकि मैं बाहर है कि क्या यह मान सेट करने के समझदार था काम नहीं कर सकता है 1em पर या बस इसे अकेला छोड़ दें।

• यह window.getComputedStyle() का उपयोग करता है, इसलिए यह कुछ समायोजन के बिना आईई के साथ काम नहीं करेगा।

संदर्भ:

• Math.floor()।
• parentNode।
• parseInt()।
• tagName।
• toLowerCase()।
• window.getComputedStyle()।

Answer 4

मुझे लगता है कि आपका प्रश्न बहुत महत्वपूर्ण है। चूंकि प्रदर्शन संकल्पों की कक्षाएं तेजी से बढ़ रही हैं, स्क्रीन संकल्पों की विस्तृत श्रृंखला का समर्थन करने के लिए एम पोजिशनिंग का उपयोग करना वास्तव में आकर्षक दृष्टिकोण है। लेकिन इससे कोई फर्क नहीं पड़ता कि आप सब कुछ एम में रखने की कोशिश करते हैं - कभी-कभी आपको JQuery ड्रैग और ड्रॉप या किसी अन्य लाइब्रेरी से पिक्सेल मान मिलता है, और आप दृढ़ता के लिए सर्वर पर वापस भेजने से पहले इस मान को एम में परिवर्तित करना चाहते हैं। अगली बार जब उपयोगकर्ता पेज को देखता है, तो आइटम सही स्थिति में होगा - डिवाइस के स्क्रीन रिज़ॉल्यूशन के बावजूद वे उपयोग कर रहे हैं।

JQuery प्लगइन्स बहुत डरावना नहीं हैं जब आप कोड की समीक्षा कर सकते हैं, विशेष रूप से यदि वे this plugin to convert pixel values to em जैसे छोटे और मीठे हैं। असल में यह इतना छोटा है कि मैं पूरी चीज़ को यहां पेस्ट कर दूंगा। कॉपीराइट नोटिस के लिए लिंक देखें।

$.fn.toEm = function(settings){ 
    settings = jQuery.extend({ 
     scope: 'body' 
    }, settings); 
    var that = parseInt(this[0],10), 
     scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope), 
     scopeVal = scopeTest.height(); 
    scopeTest.remove(); 
    return (that/scopeVal).toFixed(8) + 'em'; 
}; 


$.fn.toPx = function(settings){ 
    settings = jQuery.extend({ 
     scope: 'body' 
    }, settings); 
    var that = parseFloat(this[0]), 
     scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope), 
     scopeVal = scopeTest.height(); 
    scopeTest.remove(); 
    return Math.round(that * scopeVal) + 'px'; 
}; 

प्रयोग उदाहरण: $(myPixelValue).toEm(); या $(myEmValue).toPx();।

मैंने अभी अपने आवेदन में इसका परीक्षण किया है, यह बहुत अच्छा काम करता है। तो मैंने सोचा कि मैं साझा करता हूं।

Answer 5

पुराना सवाल, लेकिन संदर्भ के लिए, यहां कुछ ऐसा है जो मैंने एक साथ जोड़ा है, दायरा और प्रत्यय वैकल्पिक हैं। इसे स्ट्रिंग या एम मान को स्ट्रिंग के रूप में पास करें, उदाहरण के लिए। '4em' [आप रिक्त स्थान और ऊपरी/लोअरकेस का उपयोग कर सकते हैं] और यह पीएक्स मान वापस कर देगा। जब तक आप इसे एक गुंजाइश न दें, स्थानीय ईएम मूल्य खोजने के लिए लक्ष्य तत्व होगा, यह शरीर को डिफ़ॉल्ट रूप से हटा देगा, प्रभावी रूप से आपको रिम मान दे रहा है। अंत में, वैकल्पिक प्रत्यय पैरामीटर [बूलियन] लौटे हुए मूल्य में 'px' जोड़ देगा, उदाहरण के लिए 48 48px हो जाता है।

पूर्व: https://github.com/normanzb/size

यह आप जब तक इकाइयों में परिवर्तित करने में मदद करता है: emRemToPx('3em', '#content')

एक font-size 16px/100% दस्तावेज़

/** 
* emRemToPx.js | @whatsnewsisyphus 
* To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty. 
* see CC0 Public Domain Dedication <http://creativecommons.org/publicdomain/zero/1.0/>. 
*/ 
    var emRemToPx = function(value, scope, suffix) { 
    if (!scope || value.toLowerCase().indexOf("rem") >= 0) { 
     scope = 'body'; 
    } 
    if (suffix === true) { 
     suffix = 'px'; 
    } else { 
     suffix = null; 
    } 
    var multiplier = parseFloat(value); 
    var scopeTest = $('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(scope); 
    var scopeVal = scopeTest.height(); 
    scopeTest.remove(); 
    return Math.round(multiplier * scopeVal) + suffix; 
    }; 

Answer 6

चेक इस छोटे से स्क्रिप्ट पर वापसी 48 जैसा कि आप एक संदर्भ डोम तत्व

Answer 7

आमतौर पर जब आपको कनवर्ट करना चाहते हैंसे em, रूपांतरण तत्व पर ही होता है। getComputedStylepx में मूल्य लौटाता है जो उनकी प्रतिक्रिया को तोड़ देता है।के रूप में

/** 
* Get the equivalent EM value on a given element with a given pixel value. 
* 
* Normally the number of pixel specified should come from the element itself (e.g. element.style.height) since EM is 
* relative. 
* 
* @param {Object} element - The HTML element. 
* @param {Number} pixelValue - The number of pixel to convert in EM on this specific element. 
* 
* @returns {Boolean|Number} The EM value, or false if unable to convert. 
*/ 
window.getEmValueFromElement = function (element, pixelValue) { 
    if (element.parentNode) { 
     var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize); 
     var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize); 
     var pixelValueOfOneEm = (elementFontSize/parentFontSize) * elementFontSize; 
     return (pixelValue/pixelValueOfOneEm); 
    } 
    return false; 
}; 

यह रूप में उपयोग करना आसान होगा:

var element = document.getElementById('someDiv'); 
var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight); 

Answer 8

मैं एक पुस्तकालय में इस कार्यक्षमता, पैरामीटर प्रकार की जाँच के साथ पूरा पैकेज किया है नीचे दिए गए कोड को इस मुद्दे के साथ मदद करने के लिए इस्तेमाल किया जा सकता: px-to-em

को देखते हुए इस HTML:

<p id="message" style="font-size: 16px;">Hello World!</p> 

आप इन outp उम्मीद कर सकते हैं संघ राज्य क्षेत्रों:

pxToEm(16, message) === 1 
pxToEm(24, message) === 1.5 
pxToEm(32, message) === 2 

के बाद से ओपी एक पुस्तकालय के बिना यह करने के लिए एक तरह से अनुरोध किया है, मैं एक लाइव डेमो के लिए px-to-em के स्रोत कोड कॉपी किया है:

function pxToEm (px, element) { 
 
    element = element === null || element === undefined ? document.documentElement : element; 
 
    var temporaryElement = document.createElement('div'); 
 
    temporaryElement.style.setProperty('position', 'absolute', 'important'); 
 
    temporaryElement.style.setProperty('visibility', 'hidden', 'important'); 
 
    temporaryElement.style.setProperty('font-size', '1em', 'important'); 
 
    element.appendChild(temporaryElement); 
 
    var baseFontSize = parseFloat(getComputedStyle(temporaryElement).fontSize); 
 
    temporaryElement.parentNode.removeChild(temporaryElement); 
 
    return px/baseFontSize; 
 
} 
 

 
console.log(pxToEm(16, message), 'Should be 1'); 
 
console.log(pxToEm(24, message), 'Should be 1.5'); 
 
console.log(pxToEm(32, message), 'Should be 2');

<p id="message" style="font-size: 16px;">Hello World!</p>

मैं this answer से सीखा है कि getComputedStyle के साथ हम दशमलव बिंदु के साथ divisor px मान को विश्वसनीय रूप से प्राप्त कर सकते हैं, जो गणना की सटीकता को बेहतर बनाता है। मैंने पाया कि अरास का जवाब 0.5 पीएक्स से अधिक हो सकता है, जिससे हमारे लिए घूर्णन त्रुटियां हुईं।