Buscar un código de JavaScript

Este código muestra como obtener cualquier valor de los posibles estilos que puede tener un elemento.

En este ejemplo, estos son los estilos de nuestro <div>

editor_code'>-webkit-writing-mode -> horizontal-tb -webkit-user-modify -> read-only -webkit-user-drag -> auto -webkit-text-stroke-width -> 0px -webkit-text-stroke-color -> rgb(0, 0, 0) -webkit-text-security -> none -webkit-text-orientation -> vertical-right -webkit-text-fill-color -> rgb(0, 0, 0) -webkit-text-emphasis-style -> none -webkit-text-emphasis-position -> over right -webkit-text-emphasis-color -> rgb(0, 0, 0) -webkit-text-decorations-in-effect -> none -webkit-text-combine -> none -webkit-tap-highlight-color -> rgba(0, 0, 0, 0.18) -webkit-rtl-ordering -> logical -webkit-print-color-adjust -> economy -webkit-mask-size -> auto -webkit-mask-repeat -> repeat -webkit-mask-position -> 0% 0% -webkit-mask-origin -> border-box -webkit-mask-image -> none -webkit-mask-composite -> source-over -webkit-mask-clip -> border-box -webkit-mask-box-image-width -> auto -webkit-mask-box-image-source -> none -webkit-mask-box-image-slice -> 0 fill -webkit-mask-box-image-repeat -> stretch -webkit-mask-box-image-outset -> 0 -webkit-mask-box-image -> none -webkit-locale -> auto -webkit-line-clamp -> none -webkit-line-break -> auto -webkit-hyphenate-character -> auto -webkit-highlight -> none -webkit-font-smoothing -> auto -webkit-box-reflect -> none -webkit-box-pack -> start -webkit-box-orient -> horizontal -webkit-box-ordinal-group -> 1 -webkit-box-flex -> 0 -webkit-box-direction -> normal -webkit-box-decoration-break -> slice -webkit-box-align -> stretch -webkit-border-vertical-spacing -> 0px -webkit-border-image -> none -webkit-border-horizontal-spacing -> 0px -webkit-app-region -> none zoom -> 1 z-index -> auto y -> 0px x -> 0px writing-mode -> horizontal-tb word-spacing -> 0px word-break -> normal will-change -> auto width -> 1247px widows -> 2 white-space -> normal visibility -> visible vertical-align -> baseline vector-effect -> none user-select -> auto unicode-bidi -> normal transition-timing-function -> ease transition-property -> all transition-duration -> 0s transition-delay -> 0s transform-style -> flat transform-origin -> 623.5px 612px transform -> none touch-action -> auto top -> auto text-underline-position -> auto text-transform -> none text-size-adjust -> auto text-shadow -> none text-rendering -> auto text-overflow -> clip text-indent -> 0px text-decoration-style -> solid text-decoration-skip-ink -> auto text-decoration-line -> none text-decoration-color -> rgb(0, 0, 0) text-decoration -> none solid rgb(0, 0, 0) text-anchor -> start text-align-last -> auto text-align -> start table-layout -> auto tab-size -> 8 stroke-width -> 1px stroke-opacity -> 1 stroke-miterlimit -> 4 stroke-linejoin -> miter stroke-linecap -> butt stroke-dashoffset -> 0px stroke-dasharray -> none stroke -> none stop-opacity -> 1 stop-color -> rgb(0, 0, 0) speak -> normal shape-rendering -> auto shape-outside -> none shape-margin -> 0px shape-image-threshold -> 0 scroll-padding-inline-start -> auto scroll-padding-inline-end -> auto scroll-padding-block-start -> auto scroll-padding-block-end -> auto scroll-margin-inline-start -> 0px scroll-margin-inline-end -> 0px scroll-margin-block-start -> 0px scroll-margin-block-end -> 0px scroll-behavior -> auto ry -> auto rx -> auto ruby-position -> over row-gap -> normal right -> auto resize -> none r -> 0px position -> static pointer-events -> auto perspective-origin -> 623.5px 1098px perspective -> none paint-order -> normal padding-top -> 0px padding-right -> 0px padding-left -> 0px padding-inline-start -> 0px padding-inline-end -> 0px padding-bottom -> 0px padding-block-start -> 0px padding-block-end -> 0px overscroll-behavior-inline -> auto overscroll-behavior-block -> auto overflow-y -> visible overflow-x -> visible overflow-wrap -> normal overflow-anchor -> auto outline-width -> 0px outline-style -> none outline-offset -> 0px outline-color -> rgb(0, 0, 0) orphans -> 2 order -> 0 opacity -> 1 offset-rotate -> auto 0deg offset-path -> none offset-distance -> 0px object-position -> 50% 50% object-fit -> fill mix-blend-mode -> normal min-width -> 0px min-inline-size -> 0px min-height -> 0px min-block-size -> 0px max-width -> none max-inline-size -> none max-height -> none max-block-size -> none mask-type -> luminance marker-start -> none marker-mid -> none marker-end -> none margin-top -> 0px margin-right -> 0px margin-left -> 0px margin-inline-start -> 0px margin-inline-end -> 0px margin-bottom -> 0px margin-block-start -> 0px margin-block-end -> 0px list-style-type -> disc list-style-position -> outside list-style-image -> none line-height -> normal line-break -> auto lighting-color -> rgb(255, 255, 255) letter-spacing -> normal left -> auto justify-self -> auto justify-items -> normal justify-content -> normal isolation -> auto inset-inline-start -> auto inset-inline-end -> auto inset-block-start -> auto inset-block-end -> auto inline-size -> 1247px image-rendering -> auto image-orientation -> from-image hyphens -> manual height -> 3456px grid-template-rows -> none grid-template-columns -> none grid-template-areas -> none grid-row-start -> auto grid-row-end -> auto grid-column-start -> auto grid-column-end -> auto grid-auto-rows -> auto grid-auto-flow -> row grid-auto-columns -> auto font-weight -> 400 font-variant-numeric -> normal font-variant-ligatures -> normal font-variant-east-asian -> normal font-variant-caps -> normal font-variant -> normal font-style -> normal font-stretch -> 100% font-size -> 16px font-optical-sizing -> auto font-kerning -> auto font-family -> "Times New Roman" flood-opacity -> 1 flood-color -> rgb(0, 0, 0) float -> none flex-wrap -> nowrap flex-shrink -> 1 flex-grow -> 0 flex-direction -> row flex-basis -> auto filter -> none fill-rule -> nonzero fill-opacity -> 1 fill -> rgb(0, 0, 0) empty-cells -> show dominant-baseline -> auto display -> block direction -> ltr d -> none cy -> 0px cx -> 0px cursor -> auto content -> normal column-width -> auto column-span -> none column-rule-width -> 0px column-rule-style -> none column-rule-color -> rgb(0, 0, 0) column-gap -> normal column-count -> auto color-rendering -> auto color-interpolation-filters -> linearrgb color-interpolation -> srgb color -> rgb(0, 0, 0) clip-rule -> nonzero clip-path -> none clip -> auto clear -> none caret-color -> rgb(0, 0, 0) caption-side -> top buffered-rendering -> auto break-inside -> auto break-before -> auto break-after -> auto box-sizing -> content-box box-shadow -> none bottom -> auto border-top-width -> 0px border-top-style -> none border-top-right-radius -> 0px border-top-left-radius -> 0px border-top-color -> rgb(0, 0, 0) border-right-width -> 0px border-right-style -> none border-right-color -> rgb(0, 0, 0) border-left-width -> 0px border-left-style -> none border-left-color -> rgb(0, 0, 0) border-inline-start-width -> 0px border-inline-start-style -> none border-inline-start-color -> rgb(0, 0, 0) border-inline-end-width -> 0px border-inline-end-style -> none border-inline-end-color -> rgb(0, 0, 0) border-image-width -> 1 border-image-source -> none border-image-slice -> 100% border-image-repeat -> stretch border-image-outset -> 0 border-collapse -> separate border-bottom-width -> 0px border-bottom-style -> none border-bottom-right-radius -> 0px border-bottom-left-radius -> 0px border-bottom-color -> rgb(0, 0, 0) border-block-start-width -> 0px border-block-start-style -> none border-block-start-color -> rgb(0, 0, 0) border-block-end-width -> 0px border-block-end-style -> none border-block-end-color -> rgb(0, 0, 0) block-size -> 5292px baseline-shift -> 0px background-size -> auto background-repeat -> repeat background-position -> 0% 0% background-origin -> padding-box background-image -> url("http://localhost/test/image.jpg") background-color -> rgba(0, 0, 0, 0) background-clip -> border-box background-blend-mode -> normal background-attachment -> scroll backface-visibility -> visible backdrop-filter -> none appearance -> none animation-timing-function -> ease animation-play-state -> running animation-name -> none animation-iteration-count -> 1 animation-fill-mode -> none animation-duration -> 0s animation-direction -> normal animation-delay -> 0s alignment-baseline -> auto align-self -> auto align-items -> normal align-content -> normal

Código de ejemplo que muestra como va obteniendo los valores recibidos por el usuario y los va guardando en un arrays, y ir mostrando los elementos pares, impares, la suma de los elementos pares y impares, suma total de todos los valores, valor máximo y valor mínimo.

Función que recibe un numero entero, y devuelve un array o tupla con los números.
Si recibe algún valor que no es un entero, no es devuelto.

editor_code'>console.log(numberToArray(123)); // [1, 2, 3] console.log(numberToArray(123.45)); // [1, 2, 3, 4, 5] console.log(numberToArray("casa")); // [] console.log(numberToArray("")); // []

Sencilla página en JavaScript para hacer un tes de oposiciones y evaluarlo abajo al final

Este simple ejemplo, muestra como añadir elementos a un <select> o quitar elementos de un <select> desde JavaScript

Función que devuelve todas las imágenes de nuestra pagina web.
Permite indicar si deseamos que hayan duplicados

editor_code'>getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png'] getImages(document, false); // ['image1.jpg', 'image2.png'] getImages(document.getElementById("article"), false); // ['article1.jpg', 'article2.png']

Este simple código muestra como utilizando el evento visibilitychange (editor_url'>https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event) podemos cambiar el titulo que aparece en la pestaña del navegador cuando obtiene el foco y cuando lo pierde.

Función para ordenar un array de objetos utilizando el metodo de ordenamiento burbuja.
La función tiene que recibir el array y dos claves de los campos a ordenar

editor_code'>let array = [ {name: "compu", price: 1200, review: 8}, {name: "celulare", price: 300, review: 9}, {name: "tele", price: 800, review: 1}, {name: "play", price: 1200, review: 7} ]; console.table(bubbleObject(array, "price", "review")); ┌───── ───┬──────────┬──────┬───────┐ │ (index) │ name │ price │ review │ ├────────┼───────────┼──────┼───────┤ │ 0 │ 'celulare' │ 300 │ 9 │ │ 1 │ 'tele' │ 800 │ 1 │ │ 2 │ 'play' │ 1200 │ 7 │ │ 3 │ 'compu' │ 1200 │ 8 │ └─────────┴────────────┴───────┴────────┘
El mismo ejemplo ordenado por una sola clave: editor_url'>https://www.lawebdelprogramador.com/codigo/JavaScript/6911-Metodo-burbuja-de-ordenamiento-sobre-un-array-de-objetos.html

Función para ordenar un array de objetos utilizando el metodo de ordenamiento burbuja.
La función tiene que recibir el array y la clave del campo a ordenar.

editor_code'>let array = [ {name: "compu", price: 1200, review: 8}, {name: "celulare", price: 300, review: 9}, {name: "tele", price: 800, review: 1}, {name: "play", price: 1200, review: 7} ]; console.table(bubbleObject(array, "price")); ┌─────────┬────────────┬───────┬────────┐ │ (index) │ name │ price │ review │ ├─────────┼────────────┼───────┼────────┤ │ 0 │ 'celulare' │ 300 │ 9 │ │ 1 │ 'tele' │ 800 │ 1 │ │ 2 │ 'compu' │ 1200 │ 8 │ │ 3 │ 'play' │ 1200 │ 7 │ └─────────┴────────────┴───────┴────────┘ console.table(bubbleObject(array, "review")); ┌─────────┬────────────┬───────┬────────┐ │ (index) │ name │ price │ review │ ├─────────┼────────────┼───────┼────────┤ │ 0 │ 'tele' │ 800 │ 1 │ │ 1 │ 'play' │ 1200 │ 7 │ │ 2 │ 'compu' │ 1200 │ 8 │ │ 3 │ 'celulare' │ 300 │ 9 │ └─────────┴────────────┴───────┴────────┘
El mismo código ordenando por dos claves: editor_url'>https://www.lawebdelprogramador.com/codigo/JavaScript/6912-Metodo-burbuja-de-ordenamiento-sobre-un-array-de-objetos-por-dos-valores.html

Función que devuelve la diferencia horaria actual de una zona horaria en relación a la zona horaria UTC.
Si la zona horaria no existe devuelve false.

editor_code'>getOffsetTimezone("UTC"); // 0 getOffsetTimezone("America/New_York"); // -18000 getOffsetTimezone("Europe/Madrid"); // 3600 getOffsetTimezone("noExiste");
Si quieres obtener la diferencia horaria en una fecha dada: editor_url'>https://www.lawebdelprogramador.com/codigo/JavaScript/6910-Obtener-la-diferencia-horaria-de-una-zona-horaria-especificada-con-relacion-a-UTC-en-una-fecha-dada.html