{"id":818,"date":"2024-07-31T07:32:02","date_gmt":"2024-07-31T05:32:02","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=818"},"modified":"2024-07-31T07:32:02","modified_gmt":"2024-07-31T05:32:02","slug":"006-dom-clases-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/13-dom-document-object-model\/006-dom-clases-css\/","title":{"rendered":"006. DOM: Clases CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En los cap\u00edtulos anteriores hab\u00edamos visto el uso de <strong>selectores<\/strong>, aplicar <strong>estilos<\/strong> y obtener los <strong>atributos<\/strong> de una etiqueta <strong>HTML<\/strong>, sin embargo, en ning\u00fan momento hablamos de acceder a las <strong>clases<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Para acceder al nombre y valor de una clase tenemos las siguientes propiedades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>className<\/em><\/strong>: devuelve la cadena de texto que tiene el atributo <strong><em>class<\/em><\/strong><\/li>\n\n\n\n<li><strong>classList<\/strong>: devuelve un <strong>DOMTokenList<\/strong>, que parece como si fuera un <strong>array<\/strong>, pero no lo es.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A trav\u00e9s de la propiedad <strong><em>classList<\/em><\/strong> tenemos una serie de <strong>m\u00e9todos<\/strong> que nos van a ayudar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>contains(\u00abnombre-clase\u00bb)<\/em><\/strong>: este m\u00e9todo eval\u00faa si un <strong>elemento<\/strong> tiene una <strong>clase<\/strong> en particular.<\/li>\n\n\n\n<li><strong><em>add(\u00abnombre-clase\u00bb)<\/em><\/strong>: a\u00f1ade <strong>clases<\/strong> a un <strong>elemento<\/strong>.<\/li>\n\n\n\n<li><strong><em>remove(\u00abnombre-clase)<\/em><\/strong>: elimina una <strong>clase<\/strong> a un <strong>elemento<\/strong>.<\/li>\n\n\n\n<li><strong><em>toggle(\u00abnombre-clase\u00bb)<\/em><\/strong>: es un <strong>m\u00e9todo<\/strong> que act\u00faa como interruptor, elimina una <strong>clase<\/strong> si la <strong>clase<\/strong> existe, y si la <strong>clase<\/strong> no existe se la a\u00f1ade al <strong>elemento<\/strong>. Este <strong>m\u00e9todo<\/strong> suele utilizarse en aplicaciones con las famosas <strong>dark modes<\/strong>, p\u00e1ginas que cambian el estilo de color claro a color oscuro.<\/li>\n\n\n\n<li><strong><em>replace(\u00abclase-a-reemplazar\u00bb,\u00bbclase-nueva\u00bb)<\/em><\/strong>: reemplaza una clase en particular por otra.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Intercambiar varias clases al mismo tiempo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lo podemos hacer de igual manera, tan s\u00f3lo hay que separarlas por comas. Veamos la sintaxis que se necesita.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm para agregar clases<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$card.classList.add(\"opacity-80\", \"sepia\")<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Ejm completo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos la sintaxis de un ejm completo<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n  &lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Manejo de DOM&lt;\/title&gt;\n  &lt;style&gt;\n  .card {\n  display: inline-block;\n  background-color: var(--dark-color);\n  color: var(yellow-color);\n  }\n\n  .card figcaption {\n  padding: 1rem;\n  }\n\n  .rotate-45 {\n  transform: rotate(180deg);\n  }\n\n  .opacity-80 {\n  opacity: 0.8;\n  }\n\n  .sepia {\n  filter: sepia();\n  }\n  &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n\n  &lt;h2&gt;DOM y estilos&lt;\/h2&gt;\n  &lt;p id=\"que-es\"&gt;\n  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae facilis, \n  adipisci necessitatibus veritatis maiores, magni amet nisi dolor excepturi \n  obcaecati laudantium animi eos accusamus. Eaque at voluptate quidem ipsa mollitia!\n  &lt;\/p&gt;\n\n  &lt;section class=\"cards\"&gt;\n  &lt;figure class=\"card\"&gt;\n  &lt;img src=\"https:\/\/placeimg.com\/200\/200\/tech\" alt=\"Tech\"&gt;\n  &lt;figcaption&gt;Tech&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure class=\"card\"&gt;\n  &lt;img src=\"https:\/\/placeimg.com\/200\/200\/animals\" alt=\"Animals\"&gt;\n  &lt;figcaption&gt;Animals&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure class=\"card\"&gt;\n  &lt;img src=\"https:\/\/placeimg.com\/200\/200\/people\" alt=\"People\"&gt;\n  &lt;figcaption&gt;People&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure class=\"card\"&gt;\n  &lt;img src=\"https:\/\/placeimg.com\/200\/200\/arch\" alt=\"Arch\"&gt;\n  &lt;figcaption&gt;Arch&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;figure class=\"card\"&gt;\n  &lt;img src=\"https:\/\/placeimg.com\/200\/200\/nature\" alt=\"Nature\"&gt;\n  &lt;figcaption&gt;Nature&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n  &lt;\/section&gt;\n\n  &lt;script&gt;\n  const $card = document.querySelector(\".card\");\n  console.log($card.classList);\n  console.log($card.classList.contains(\"rotate-45\"));\n  $card.classList.add(\"rotate-45\");\n  console.log($card.classList.contains(\"rotate-45\"));\n  $card.classList.remove(\"rotate-45\");\n  console.log($card.classList.contains(\"rotate-45\"));\n  $card.classList.toggle(\"rotate-45\");\n  console.log($card.classList.contains(\"rotate-45\"));\n  $card.classList.toggle(\"rotate-45\");\n  console.log($card.classList.contains(\"rotate-45\"));\n  $card.classList.replace(\"rotate-45\",\"opacity-80\");\n  console.log($card.classList.contains(\"opacity-80\"));\n  $card.classList.add(\"opacity-80\", \"sepia\");\n  &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En resumen, los m\u00e9todos que tenemos para trabajar con las classList son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>add()<\/em><\/strong>: a\u00f1adir clases<\/li>\n\n\n\n<li><strong><em>remove()<\/em><\/strong>: eliminar clases<\/li>\n\n\n\n<li><strong><em>toggle()<\/em><\/strong>: a\u00f1adir o eliminar clases (dependiendo de si existe o no la clase)<\/li>\n\n\n\n<li><strong><em>replace()<\/em><\/strong>: reemplazar clase por otra<\/li>\n\n\n\n<li><strong><em>contains()<\/em><\/strong>: ver si hay o no una clase<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En los cap\u00edtulos anteriores hab\u00edamos visto el uso de selectores, aplicar estilos y obtener los atributos de una etiqueta HTML, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":800,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-818","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 los cap\u00edtulos anteriores hab\u00edamos visto el uso de selectores, aplicar estilos y obtener los atributos de una etiqueta HTML, [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/818","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=818"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/818\/revisions"}],"predecessor-version":[{"id":820,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/818\/revisions\/820"}],"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=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}