javascript negrita - Obtenga el tamaño de letra calculado para el elemento DOM en JS





alert bold (4)


Parece que jQuery (1.9 al menos) usa getComputedStyle() o currentStyle sí mismo cuando usas $('#element')[.css][1]('fontSize') , por lo que no deberías tener que molestarte con los más complicados soluciones si estás bien usando jQuery.

Probado en IE 7-10, FF y Chrome

¿Es posible detectar el font-size de font-size calculado de un elemento DOM, teniendo en cuenta las configuraciones genéricas realizadas en otro lugar (en la etiqueta body por ejemplo), valores heredados, etc.?

Un enfoque independiente del marco sería agradable, ya que estoy trabajando en un script que debería funcionar de forma independiente, pero eso no es un requisito, por supuesto.

Antecedentes: estoy intentando ajustar el CKEditor's selector de fuentes CKEditor's (fuente here ) para que siempre muestre el tamaño de fuente de la posición actual del cursor (en oposición a cuando está dentro de un span que tiene un conjunto de font-size explícito, que es el comportamiento actual).




Para superar el problema 'em', he escrito rápidamente una función, si el tamaño de letra en ie es 'em', la función calcula con el tamaño de fuente del cuerpo.

        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;
    }



Podría intentar usar la propiedad element.currentStyle IE no estándar; de lo contrario, puede buscar el método getComputedStyle estándar DOM Nivel 2 , si está disponible:

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)]; 
  }
}

Uso:

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

Más información:

Editar: Gracias a @Crescent Fresh , @kangax y @Pekka por los comentarios.

Cambios:

  • Se camelize función camelize , ya que se debe acceder a las propiedades que contienen hypens, como font-size , como camelCase (por ej .: fontSize ) en el objeto IE currentStyle .
  • Verificando la existencia de document.defaultView antes de acceder a getComputedStyle .
  • Se agregó el último caso, cuando el.currentStyle y getComputedStyle no están disponibles, obtenga la propiedad CSS en línea a través de element.style .



URL de acceso a la información

JavaScript le proporciona muchos métodos para recuperar y cambiar la URL actual, que se muestra en la barra de direcciones del navegador. Todos estos métodos utilizan el objeto Location , que es una propiedad del objeto Window . Puede crear un nuevo objeto de Location que tenga la URL actual de la siguiente manera:

var currentLocation = window.location;

Estructura básica de URL

<protocol>//<hostname>:<port>/<pathname><search><hash>
  • protocolo: especifica el nombre del protocolo que se utilizará para acceder al recurso en Internet. (HTTP (sin SSL) o HTTPS (con SSL))

  • nombre de host: nombre de host especifica el host que posee el recurso. Por ejemplo, www..com . Un servidor proporciona servicios usando el nombre del host.

  • puerto: un número de puerto utilizado para reconocer un proceso específico al que se reenviará un mensaje de Internet u otro mensaje de red cuando llegue a un servidor.

  • ruta de acceso: la ruta proporciona información sobre el recurso específico dentro del host al que el cliente web desea acceder. Por ejemplo, /index.html .

  • consulta: una cadena de consulta sigue el componente de la ruta y proporciona una cadena de información que el recurso puede utilizar para algún propósito (por ejemplo, como parámetros para una búsqueda o como datos para procesar).

  • hash: la parte de anclaje de una URL, incluye el signo de hash (#).

Con estas propiedades del objeto Location , puede acceder a todos estos componentes de URL y a lo que pueden establecer o devolver:

  • href - la URL completa
  • protocolo - el protocolo de la URL
  • host - el nombre de host y el puerto de la URL
  • nombre de host - el nombre de host de la URL
  • puerto : el número de puerto que usa el servidor para la URL
  • ruta de acceso : el nombre de la ruta de la URL
  • búsqueda - la parte de consulta de la URL
  • hash - la porción de anclaje de la URL

Espero que tengas tu respuesta ..







javascript jquery css ckeditor font-size