javascript معنى احصل على حجم الخط المحسوب لعنصر DOM في JS




javascript dom (3)

هل من الممكن اكتشاف font-size المحسوب لعنصر DOM ، مع الأخذ في الاعتبار الإعدادات العامة التي تم إجراؤها في مكان آخر (في علامة النص على سبيل المثال) والقيم الموروثة وما إلى ذلك؟

قد يكون منهجًا إطارًا مستقلًا جيدًا ، حيث أعمل على نص برمجي يجب أن يعمل بشكل مستقل ، لكن هذا ليس مطلبًا بالطبع.

الخلفية: أحاول أن أقوم CKEditor's البرنامج المساعد لمحدد الخط CKEditor's (المصدر here ) بحيث يظهر دائمًا حجم الخط الخاص بمؤشر المؤشر الحالي (على عكس فقط عندما يكون ضمن span يحتوي على مجموعة font-size صريح ، وهو السلوك الحالي).


للتغلب على مشكلة 'em' لقد كتبت بسرعة دالة ، إذا كان حجم الخط في أي 'em' تقوم الدالة بحساب حجم خط الهيكل.

        function getFontSize(element){
        var size = computedStyle(element, 'font-size');
        if(size.indexOf('em') > -1){
            var defFont = computedStyle(document.body, 'font-size');
            if(defFont.indexOf('pt') > -1){
                defFont = Math.round(parseInt(defFont)*96/72);
            }else{
                defFont = parseInt(defFont);
            }
            size = Math.round(defFont * parseFloat(size));
        } 
        else if(size.indexOf('pt') > -1){
            size = Math.round(parseInt(size)*96/72)
        }
        return parseInt(size);
    }

    function computedStyle(element, property){
        var s = false;
        if(element.currentStyle){
            var p = property.split('-');
            var str = new String('');
            for(i in p){
                str += (i > 0)?(p[i].substr(0, 1).toUpperCase() + p[i].substr(1)):p[i];
            }
            s = element.currentStyle[str];
        }else if(window.getComputedStyle){
            s = window.getComputedStyle(element, null).getPropertyValue(property);
        }
        return s;
    }

يبدو أن jQuery (1.9 على الأقل) يستخدم getComputedStyle() أو currentStyle نفسه عند استخدام $('#element')[.css][1]('fontSize') ، لذلك لا ينبغي عليك أن تهتم أكثر بمزيد من التعقيد الحلول إذا كنت موافق باستخدام jQuery.

تم اختباره في IE 7-10 و FF و Chrome


يمكنك محاولة استخدام خاصية IE element.currentStyle غير القياسية ، وإلا يمكنك البحث عن طريقة getComputedStyle القياسية في DOM Level 2 إذا كانت متاحة:

function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}

الاستعمال:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

مزيد من المعلومات:

تعديل: بفضل Crescent Fresh ، kangax و @ Pekka للتعليقات.

التغييرات:

  • وظيفة camelize مضافة ، حيث يجب الوصول إلى الخصائص التي تحتوي على hypens ، مثل font-size ، كـ camelCase (على سبيل المثال: fontSize ) على كائن IE الحالي.
  • التحقق من وجود document.defaultView قبل الوصول إلى getComputedStyle .
  • الحالة الأخيرة المضافة ، عندما تكون el.currentStyle و getComputedStyle غير متوفرة ، احصل على خاصية CSS المضمنة عبر element.style .




font-size