files/es/web/api/htmlelement/style/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

---
title: Element.style
slug: Web/API/HTMLElement/style
translation_of: Web/API/ElementCSSInlineStyle/style
---
<p>{{ ApiRef("HTML DOM") }}</p>

<h3 id="Summary" name="Summary">Resumen</h3>

<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p>

<h3 id="Example" name="Example">Ejemplo</h3>

<pre class="eval">var div = document.getElementById("div1");
div.style.marginTop = ".25in";
</pre>

<h3 id="Notes" name="Notes">Notas</h3>

<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p>

<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección &lt;head&gt; o en hojas de estilo.</p>

<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p>

<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p>

<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p>

<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p>

<pre class="eval">elt.style.color = "blue";  // Asignación directa

var st = elt.style;
st.color = "blue";  // Asignación Indirecta
</pre>

<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p>

<pre class="eval">var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st)
  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
</pre>

<p> </p>

<h3 id="Specification" name="Specification">Especificación</h3>

<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>