JQuery: comment obtenir la police assignée à l'élément
est-il possible de récupérer la police assignée d'un élément dans jQuery?
disons qu'il y a css:
#element
{
font-family: blahblah,Arial;
}
dans l'exemple ci-dessus, la police Arial sera assignée à l'élément#. Y a-t-il un moyen d'obtenir cette information via JS/JQuery?
quelque chose comme:
$('#element').css('font-family');
retourne juste blahblah,Arial;
4 réponses
(function($) {
$.fn.detectFont = function() {
var fonts = $(this).css('font-family').split(",");
if ( fonts.length == 1 )
return fonts[0];
var element = $(this);
var detectedFont = null;
fonts.forEach( function( font ) {
var clone = element.clone().css({'visibility': 'hidden', 'font-family': font}).appendTo('body');
if ( element.width() == clone.width() )
detectedFont = font;
clone.remove();
});
return detectedFont;
}
})(jQuery);
edit : a dû supprimer l'élément cloné du dom.
a mis en place tout à l'heure, encore une fois, il repose toujours sur la largeur de l'élément - de sorte que votre kilométrage peut varier.
$('#element').detectFont(); //outputs Arial
vous pouvez utiliser la bibliothèque de détecteur pour le faire: http://www.lalit.org/lab/javascript-css-font-detect /
comme le navigateur prend la première police trouvée dans la liste, vous devriez regarder dans la liste des polices et essayer de vérifier si vous avez cette police dans votre système.
voici le code JS/ JQuery:
$(function() {
var detectFont = function(fonts) {
var detective = new Detector(), i;
for (i = 0; i < fonts.length; ++i) {
if (detective.detect(fonts[i]) !== true) {
continue
}
return fonts[i];
}
}
var fonts = $('#abcde').css('font-family');
fonts = fonts.split(',');
console.log(detectFont(fonts));
});
et voici la démo en direct, j'ai préparé: http://jsfiddle.net/netme/pr7qb/1/
l'Espoir, cette approche va vous aider.
a modifié la réponse de kmfk pour qu'elle fonctionne pour tous les éléments. Les éléments de Bloc ont une largeur fixe ou la largeur dynamique ne fonctionnera pas donc cela utilise des éléments en ligne:
/**
* Detects the font of an element from the font-family css attribute by comparing the font widths on the element
* @link http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element
*/
(function($) {
$.fn.detectFont = function() {
var fontfamily = $(this).css('font-family');
var fonts = fontfamily.split(',');
if ( fonts.length == 1 )
return fonts[0];
var element = $(this);
var detectedFont = null;
fonts.forEach( function( font ) {
var clone = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': fontfamily, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
var dummy = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': font, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
//console.log(clone, dummy, fonts, font, clone.width(), dummy.width());
if ( clone.width() == dummy.width() )
detectedFont = font;
clone.remove();
dummy.remove();
});
return detectedFont;
}
})(jQuery);