معنى - javascript dom




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

هل من الممكن اكتشاف 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





font-size