2011-01-24 15 views
16

Sé que $("#divId").html() me dará innerHtml. También necesito sus estilos (que pueden definirse por medio de clases) ya sea en línea style atributo o todos los estilos/clases dentro de una etiqueta <style> separada.jQuery - Cómo obtener todos los estilos/css (definidos en documento interno/externo) con HTML de un elemento

¿Es posible?

ACTUALIZACIÓN
¿Qué pasa si html es como <div id="testDiv">cfwcvb</div> y una clase CSS para #testDiv se define en la hoja de estilo externa?

ACTUALIZACIÓN 2
Lo siento por no aclarar esto antes

Si este es mi HTML

<div id="divId"> 
    <span class="someClass">Some innerText</span> 
</div> 

y estilos se define en la hoja de estilos separado o en estilos de cabeza.

#divId { 
    clear: both; 
    padding: 3px; 
    border: 2px dotted #CCC; 
    font-size: 107%; 
    line-height: 130%; 
    width: 660px; 
} 
.someClass { 
    color: blue; 
} 

Entonces cuando trato de conseguir html interna de $("#divId").html() o llame a cualquier otra función personalizada, necesito algo, como a continuación

<style> 
#divId { 
    clear: both; 
    padding: 3px; 
    border: 2px dotted #CCC; 
    font-size: 107%; 
    line-height: 130%; 
    width: 660px; 
} 
.someClass { 
    color: blue; 
} 
</style> 

<div id="divId"> 
    <span class="someClass">Some innerText</span> 
</div> 

ACTUALIZACIÓN 3 para respuesta por kirilloid
me encontré debajo de código en la ventana de comandos de las herramientas del depurador de Chrome para la página this y esto es lo que veo TypeError: Cannot read property 'rules' of undefined

function getElementChildrenAndStyles(selector) { 
    var html = $(selector).get(0).outerHTML; 

    selector = selector.split(",").map(function(subselector){ 
    return subselector + "," + subselector + " *"; 
    }).join(","); 
    elts = $(selector); 

    var rulesUsed = []; 
    // main part: walking through all declared style rules 
    // and checking, whether it is applied to some element 
    sheets = document.styleSheets; 
    for(var c = 0; c < sheets.length; c++) { 
    var rules = sheets[i].rules || sheets[i].cssRules; 
    for(var r = 0; r < rules.length; r++) { 
     var selectorText = rules[r].selectorText; 
     var matchedElts = $(selectorText); 
     for (var i = 0; i < elts.length; i++) { 
     if (matchedElts.index(elts[i]) != -1) { 
      rulesUsed.push(CSSrule); break; 
     } 
     } 
    } 
    } 
    var style = rulesUsed.map(function(cssRule){ 
    if ($.browser.msie) { 
     var cssText = cssRule.style.cssText.toLowerCase(); 
    } else { 
     var cssText = cssRule.cssText; 
    } 
    // some beautifying of css 
    return cssText.replace(/(\{|;)\s+/g, "\$1\n ").replace(/\A\s+}/, "}"); 
    //     set indent for css here^
    }).join("\n"); 
    return "<style>\n" + style + "\n</style>\n\n" + html; 
}; 
getElementChildrenAndStyles(".post-text:first"); 
+0

Creo que su título debería ser "¿Cómo conseguir todos los estilos ..", también esto es similar: http://stackoverflow.com/questions/754607/can-jquery-get-all-css -styles-associated-with-an-element – thirtydot

+0

¿Puedes decir ** por qué ** lo necesitas exactamente? tal vez hay una manera fácil de hacer esto. – galambalazs

+0

Porque estoy copiando html de un elemento de un documento al documento de otra ventana que es un iFrame. – IsmailS

Respuesta

12

outerHTML (no estoy seguro, que lo necesite - por si acaso)

Limitaciones: CSSOM se usa y las hojas de estilo deben ser del mismo origen.

function getElementChildrenAndStyles(selector) { 
    var html = $(selector).outerHTML(); 

    selector = selector.split(",").map(function(subselector){ 
    return subselector + "," + subselector + " *"; 
    }).join(","); 
    elts = $(selector); 

    var rulesUsed = []; 
    // main part: walking through all declared style rules 
    // and checking, whether it is applied to some element 
    sheets = document.styleSheets; 
    for(var c = 0; c < sheets.length; c++) { 
    var rules = sheets[c].rules || sheets[c].cssRules; 
    for(var r = 0; r < rules.length; r++) { 
     var selectorText = rules[r].selectorText; 
     var matchedElts = $(selectorText); 
     for (var i = 0; i < elts.length; i++) { 
     if (matchedElts.index(elts[i]) != -1) { 
      rulesUsed.push(rules[r]); break; 
     } 
     } 
    } 
    } 
    var style = rulesUsed.map(function(cssRule){ 
    if (cssRule.style) { 
     var cssText = cssRule.style.cssText.toLowerCase(); 
    } else { 
     var cssText = cssRule.cssText; 
    } 
    // some beautifying of css 
    return cssText.replace(/(\{|;)\s+/g, "\$1\n ").replace(/\A\s+}/, "}"); 
    //     set indent for css here^
    }).join("\n"); 
    return "<style>\n" + style + "\n</style>\n\n" + html; 
} 

uso:

getElementChildrenAndStyles("#divId"); 
+0

Gracias por la respuesta. Intenté lo que respondiste. He actualizado mi pregunta con el resultado de lo que probé. Solo un pequeño cambio que he hecho en lo que has respondido es '$ (selector) .get (0) .outerHTML' de' $ (selector) .outerHTML() 'por lo que no necesito [outerHTML] (http : //stackoverflow.com/questions/2419749/jquery-get-selected-elements-outer-html). – IsmailS

+0

Hubo un error estúpido: lo arreglé (y edité el código en mi publicación). Pero luego tengo otro problema: seguridad. En la mayoría de los navegadores no se puede acceder a CSS a través de DOM (es decir, la forma en que uso) desde otros dominios. El archivo Stackoverflow CSS se coloca en http://sstatic.net/stackoverflow/ He probado el cambio de ejemplo en http://www.ibm.com/us/en/sandbox/ver2/ con "# ibm-search-form "y funciona, pero necesitará agregar' var $ = jQuery; 'al comienzo de la función, para poder trabajar en @ ibm.com – kirilloid

+0

Gracias, definitivamente obtendrá la recompensa que se merece. Buen trabajo. Sin embargo, un error más. falta 'http:' cuando probé como lo hiciste en el enlace que diste. – IsmailS

0

El css() método obtiene un estilo particular del elemento ... No sé si se puede recuperar todos los estilos:

http://api.jquery.com/css/

0

En general se puede acceder a los parámetros de estilo utilizando .attr ('estilo'). Si desea acceder al estilo calculado, puede usar window.getComputedStyle (element) en Opera, Firefox, Chrome y otros navegadores. Para IE, harías lo mismo con element.currentStyle.

Además, si desea acceder al estilo CSS individual, puede hacerlo con el método jQuery .css. Al igual que $ ("# divId"). Css ('font-size').

4

se puede usar algo como esto para la escritura: -

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var styleVal = $('#testDiv').attr('style'); 
    console.warn("styleVal >>> " + styleVal); 
}) 
</script> 

y simple html sería así

<div style="border:1px solid red;" id="testDiv">cfwcvb</div> 
+0

es compatible con la consola en otros navegadores? de todos modos +1 – Harish

+0

La consola no es compatible con todos los navegadores, pero puede usarla como sustituto – Mahima

+0

¿Qué sucede si hay una clase asignada y esa clase se define en un archivo css diferente? – IsmailS

6

Puede hacerse con un objeto de estilo que representa el estilo calculado para un elemento usando window.getComputedStyle() en la mayoría de los navegadores y la propiedad currentStyle del elemento en IE. Sin embargo, hay varias diferencias de navegador con valores devueltos para propiedades de acceso directo (como background), valores de color RGB, longitudes e incluso font-weight (consulte this useful test page). Prueba cuidadosamente

function computedStyle(el) { 
    return el.currentStyle || window.getComputedStyle(el, null); 
} 

alert(computedStyle(document.body).color); 
+0

He actualizado mi pregunta por si acaso no estaba clara antes. – IsmailS

+0

Necesito el marcado .. – IsmailS

3

si desea guardar todo el estilo de un elemento Creo que esto será más complicado como parece en primer lugar mi primer IDE fue la consola de Firebug CSS. esto muestra todo el estilo de un elemento y pensé ¿cómo? así que busqué para el código fuente del quemador, y la encontré esto:

http://fbug.googlecode.com/svn/branches/firebug1.7/content/firebug/css.js

este código de trabajo sólo en la parte css.

const styleGroups = 
{ 
    text: [ 
     "font-family", 
     "font-size", 
     "font-weight", 
     "font-style", 
     "color", 
     "text-transform", 
     "text-decoration", 
     "letter-spacing", 
     "word-spacing", 
     "line-height", 
     "text-align", 
     "vertical-align", 
     "direction", 
     "column-count", 
     "column-gap", 
     "column-width" 
    ], 

    background: [ 
     "background-color", 
     "background-image", 
     "background-repeat", 
     "background-position", 
     "background-attachment", 
     "opacity" 
    ], 

    box: [ 
     "width", 
     "height", 
     "top", 
     "right", 
     "bottom", 
     "left", 
     "margin-top", 
     "margin-right", 
     "margin-bottom", 
     "margin-left", 
     "padding-top", 
     "padding-right", 
     "padding-bottom", 
     "padding-left", 
     "border-top-width", 
     "border-right-width", 
     "border-bottom-width", 
     "border-left-width", 
     "border-top-color", 
     "border-right-color", 
     "border-bottom-color", 
     "border-left-color", 
     "border-top-style", 
     "border-right-style", 
     "border-bottom-style", 
     "border-left-style", 
     "-moz-border-top-radius", 
     "-moz-border-right-radius", 
     "-moz-border-bottom-radius", 
     "-moz-border-left-radius", 
     "outline-top-width", 
     "outline-right-width", 
     "outline-bottom-width", 
     "outline-left-width", 
     "outline-top-color", 
     "outline-right-color", 
     "outline-bottom-color", 
     "outline-left-color", 
     "outline-top-style", 
     "outline-right-style", 
     "outline-bottom-style", 
     "outline-left-style" 
    ], 

    layout: [ 
     "position", 
     "display", 
     "visibility", 
     "z-index", 
     "overflow-x", // http://www.w3.org/TR/2002/WD-css3-box-20021024/#overflow 
     "overflow-y", 
     "overflow-clip", 
     "white-space", 
     "clip", 
     "float", 
     "clear", 
     "-moz-box-sizing" 
    ], 

    other: [ 
     "cursor", 
     "list-style-image", 
     "list-style-position", 
     "list-style-type", 
     "marker-offset", 
     "user-focus", 
     "user-select", 
     "user-modify", 
     "user-input" 
    ] 
}; 

la función que obtiene todos los estilos.

updateComputedView: function(element) 
{ 
    var win = element.ownerDocument.defaultView; 
    var style = win.getComputedStyle(element, ""); 

    var groups = []; 

    for (var groupName in styleGroups) 
    { 
     var title = $STR("StyleGroup-" + groupName); 
     var group = {title: title, props: []}; 
     groups.push(group); 

     var props = styleGroups[groupName]; 
     for (var i = 0; i < props.length; ++i) 
     { 
      var propName = props[i]; 
      var propValue = stripUnits(rgbToHex(style.getPropertyValue(propName))); 
      if (propValue) 
       group.props.push({name: propName, value: propValue}); 
     } 
    } 

    var result = this.template.computedTag.replace({groups: groups}, this.panelNode); 
    dispatch(this.fbListeners, 'onCSSRulesAdded', [this, result]); 
} 

function stripUnits(value) 
{ 
    // remove units from '0px', '0em' etc. leave non-zero units in-tact. 
    return value.replace(/(url\(.*?\)|[^0]\S*\s*)|0(%|em|ex|px|in|cm|mm|pt|pc)(\s|$)/gi, function(_, skip, remove, whitespace) { 
    return skip || ('0' + whitespace); 
    }); 
} 

en este código me di cuenta de que el

win.getComputedStyle(element, "") 

para obtener todos los estilos de un elemento, y luego con un bucle for obtiene todo el estilo e imprime. así que creo que la getComputedStyle es la función principal de usar, y después de esto se puede conseguir a los puntales uno por uno con:

style.getPropertyValue(propName) 
8

Sin jQuery y sin el apoyo de IE, eso es todo lo que puedo hacer:

enter image description here

<!doctype html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script type = "text/javascript"> 
      Element.prototype.getStyles = function() { 
       var array = {}; 
       var styles = window.getComputedStyle (this, null); 

       for (var i = 0; i < styles.length; i ++) { 
        var style = styles[i]; 

        array[style] = styles[style]; 
       } 

       return array; // return new Array (array, this.innerHTML); You can also return the HTMl content. I don't think its necessary 
      } 

      window.addEventListener ("load", function() { 
       var divId = document.getElementById ("divId"); 
       var someClass = document.getElementsByClassName ("someClass"); 

       var string = ""; 
       var styles = divId.getStyles(); 

       for (var i in styles) { 
        string += i + ": " + styles[i] + "\n"; 
       } 

       alert (string); 
       alert ("In-line style: Height ->" + styles["height"] + "\n" + "Out-line style: Width ->" + styles["width"]) 
       alert ("HTML: " + divId.innerHTML); 

       // Same thing with the span element 
      }, false); 
     </script> 

     <style> 
      #divId { 
       clear: both; 
       padding: 3px; 
       border: 2px dotted #CCC; 
       font-size: 107%; 
       line-height: 130%; 
       width: 660px; 
      } 
      .someClass { 
       color: blue; 
      } 
     </style> 

     <title>Test</title> 
    </head> 

    <body> 
     <div id = "divId" style = "height: 100px"> 
      <span class = "someClass">Some innerText</span> 
     </div> 
    </body> 
</html> 
+0

Necesito el marcado para los estilos. – IsmailS

+0

Sea más específico por favor – Caio

+0

Necesito estilos como ' 'incluso cuando están definidos en una hoja de estilos separada. Y luego la marca html – IsmailS

0

Usted puede obtener la hoja de estilo definida dentro de las etiquetas de estilo bajo document.styleSheets. Puede leer las reglas en un mapa y buscarlas mediante selectorText. Entonces, por id: "#id", por clases: ".className". Por safari o chrome puede usar getMatchedCSSRules.

1

Basado en la respuesta de kirilloid, he creado una extensión de herramientas de desarrollador para Chrome que incorpora ese código para capturar estilos y marcado para un fragmento de página. La extensión está en el Chrome Web Store y está en Github. Todas las opciones de salida "Estilos de autor" usan ese método para iterar sobre las hojas de estilo.

enter image description here

Cuestiones relacionadas