{"id":815,"date":"2024-07-31T07:30:31","date_gmt":"2024-07-31T05:30:31","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=815"},"modified":"2024-07-31T07:30:31","modified_gmt":"2024-07-31T05:30:31","slug":"005-dom-estilos-y-variables-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/005-dom-estilos-y-variables-css\/","title":{"rendered":"005. DOM: Estilos y Variables CSS"},"content":{"rendered":"\n

En este cap\u00edtulo veremos como poder interactuar con los estilos<\/strong> de nuestros elementos<\/strong> HTML<\/strong>. En este caso vamos a hacer uso de una propiedad denominada style<\/em><\/strong> mediante la notaci\u00f3n del punto<\/strong>, en vez de utilizar getAttribute()<\/em><\/strong>. Lo vamos a empezar a ver con un ejm.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<h1>Estilos y variables CSS<\/h1>\n<a class=\"link-dom\"href=\"dom.html\"style=\"color: black; background-color: #f7df1e;\">DOM<\/a>\n\n<script>\nconst $linkDOM = document.querySelector(\".link-dom\");\n\nconsole.log($linkDOM.style);\n\/\/ Mostrar\u00e1 todos los estilos disponibles\n<\/script><\/pre>\n\n\n\n
Vamos a utilizar la notaci\u00f3n del punto<\/strong>, ya que cuando pasamos la propiedad style<\/em><\/strong> nos va a devolver un objeto de tipo CSSStyleDeclaration<\/em><\/strong> que es un mapa<\/strong> que lleva agregadas todas las propiedades CSS<\/strong> v\u00e1lidas. Dichas propiedades<\/strong> est\u00e1n todas escritas en formato camelCase<\/strong>, hay que recordar que en CSS<\/strong> todas las palabras est\u00e1n separadas por un gui\u00f3n medio<\/strong> (-), pero en Javascript<\/strong>, el gui\u00f3n medio<\/strong> podr\u00eda representar una resta num\u00e9rica, por lo que puede llamar a error, por lo que Javascript<\/strong> transforma todas las propiedades CSS<\/strong> quit\u00e1ndole el gui\u00f3n medio<\/strong> y utilizando la t\u00e9cnica del lowerCamelCase<\/strong> (a partir de la segunda palabra, la primera letra es MAY<\/strong>).<\/p>\n\n\n\n
Podr\u00edamos verlo utilizando el m\u00e9todo getAttribute()<\/em><\/strong>, como en el siguiente ejm.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log($linkDOM.getAttribute(\"style\");\n\/\/ Mostrar\u00e1 los style a los que le hayamos pasado valor<\/pre>\n\n\n\n
Acceder a una propiedad en particular<\/h2>\n\n\n\n
Con la notaci\u00f3n del punto<\/strong> es muy c\u00f3modo, veamos un ejm.<\/p>\n\n\n\n
console.log($linkDOM.style.backgroundColor);\n\/\/ Muestra el color de fondo\nconsole.log($linkDOM.style.color);<\/pre>\n\n\n\n
Mostrar las Computed Properties o propiedades din\u00e1micas<\/h2>\n\n\n\n
Para acceder a ellas utilizamos la siguiente notaci\u00f3n.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(window.getComputedStyle($linkDOM));\n\/\/ A cada propiedad le asigna un \u00edndice<\/pre>\n\n\n\n
El tipo de mapa<\/strong> que devuelve este formato es ligeramente diferente al de la notaci\u00f3n del punto<\/strong>. A cada propiedad<\/strong> se le asigna un \u00edndice, las ordena de forma alfab\u00e9tica. Cuando accedemos a las ComputedStyle<\/strong>, despu\u00e9s de la lista de definici\u00f3n de las propiedades<\/strong>, nos facilita el valor por defecto que el navegador est\u00e1 dando a esa etiqueta HTML<\/strong> a nivel de propiedades CSS<\/strong>.<\/p>\n\n\n\n
Por lo tanto, tenemos dos maneras v\u00e1lidas de ver los estilos CSS<\/strong>, una desde el objeto window<\/em><\/strong> con las Computed Properties<\/strong>, y otra con la notaci\u00f3n del punto<\/strong> y la palabra style<\/em><\/strong>.<\/p>\n\n\n\n
Acceder s\u00f3lo a una propiedad<\/h2>\n\n\n\n
Para acceder a una \u00fanica propiedad utilizando Computed Properties<\/strong> utilizamos la propiedad getPropertyValue()<\/em><\/strong> de la siguiente manera.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
console.log(window.getComputedStyle($linkDOM).getComputedValue(\"color\");\n\/\/ No es necesario poner la palabra window\nconsole.log(getComputedStyle($linkDOM).getComputedValue(\"color\");<\/pre>\n\n\n\n
En resumen para acceder a los estilos<\/h2>\n\n\n\n
Tenemos 3 maneras<\/p>\n\n\n\n
    \n
  • La notaci\u00f3n del punto<\/strong>.<\/li>\n\n\n\n
  • con getAttribute()<\/em><\/strong>.<\/li>\n\n\n\n
  • con computedStyle<\/strong>.<\/li>\n<\/ul>\n\n\n\n
    Establecer valores<\/h2>\n\n\n\n
    Existen diferentes maneras.<\/p>\n\n\n\n
      \n
    • Con la notaci\u00f3n del punto<\/strong>.<\/li>\n\n\n\n
    • Con la propiedad setProperty(\u00abpropiedad\u00bb, \u00abvalor de la propiedad\u00bb)<\/em><\/strong>: Es similar a cuando establec\u00edamos valores a atributos con el m\u00e9todo setAttribute(\u00abatributo\u00bb, \u00abvalor del atributo\u00bb)<\/em><\/strong>. En este caso estamos estableciendo valores a una propiedad CSS<\/strong>.<\/li>\n<\/ul>\n\n\n\n
      Ejm con la propiedad setProperty()<\/strong><\/p>\n\n\n\n
      $linkDOM.style.setProperty(\"text-decoration\", \"none\");\n$linkDOM.style.setProperty(\"display\", \"block\");<\/pre>\n\n\n\n
      Ejm con la notaci\u00f3n del punto<\/strong><\/p>\n\n\n\n
      $linkDOM.style.color = \"black\";\n$linkDOM.style.textAlign = \"center\";\n$linkDOM.style.marginLeft = \"auto\";\n$linkDOM.style.marginRight = \"auto\";\n$linkDOM.style.padding = \"1rem\";\n$linkDOM.style.borderRadius = \"0.5rem\";<\/pre>\n\n\n\n
      Custom Properties – Variables CSS<\/h2>\n\n\n\n
      Para entender como manipular las Custom Properties vamos a ver un ejm.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Estilos y variables CSS<\/title>\n<style>\n  :root {\n   --yellow-color: #f7df1e;\n   --dark-color: #222;\n  }\n<\/style>\n<\/head>\n\n<body>\n<h1>Estilos y variables CSS<\/h1>\n<a class=\"link-dom\" href=\"dom.html\" style=\"color: black; background-color: #f7df1e;\">DOM<\/a>\n\n<script>\nconst $html = document.documentElement,\n$body = document.body;\n\nlet varDarkColor = getComputedStyle($html).getPropertyValue(\"--dark-color\");\nlet varYellowColor = getComputedStyle($html).getPropertyValue(\"--yellow-color\");\n\nconsole.log(varDarkColor, varYellowColor);\n\n$body.style.backgroundColor = varDarkColor;\n$body.style.color = varYellowColor;\n<\/script>\n<\/body>\n<\/html><\/pre>\n\n\n\n
      Modificar valores<\/h2>\n\n\n\n
      Lo vemos con un ejm.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      $html.style.setProperty(\"--dark-color\",\"black\");\n\/\/ Establece el nuevo valor\nvarDarkColor = getComputedStyle($html).getPropertyValue(\"--dark-color\");\n\/\/ Activa el nuevo valor\n\n$body.style.setProperty(\"background-color\",varDarkColor);<\/pre>\n","protected":false},"excerpt":{"rendered":"
      En este cap\u00edtulo veremos como poder interactuar con los estilos de nuestros elementos HTML. En este caso vamos a hacer uso de…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-815","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo veremos como poder interactuar con los estilos de nuestros elementos HTML. En este caso vamos a hacer uso de...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=815"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/815\/revisions"}],"predecessor-version":[{"id":817,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/815\/revisions\/817"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/800"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}