Tengo que mostrar el selector de color para permitir cambiar el color de la propiedad deseada. Todo funciona bien, pero hay alguna manera de mostrar cerca de la etiqueta donde el usuario hace clic en la propiedad.
Como cuando el usuario hace clic en la propiedad del borde, el selector aparece cerca del borde y si el usuario hace clic en el fondo, se muestra cerca del fondo.
¿Es posible usar una sola función o tengo que tener funciones separadas y
inputseparadas?
He usado un selector de color separado para mostrar al hacer clic:
var spanTag = document.querySelectorAll("span"); var inputTag = document.querySelectorAll("input"); for (let i = 0; i < spanTag.length; i++) { spanTag[i].addEventListener('click', funcRun) function funcRun() { if (i == 0) { inputTag[i].style.display = "block"; inputTag[i+1].style.display = "none"; } else if (i == 1) { inputTag[i].style.display = "block"; inputTag[i-1].style.display = "none"; } } } input { display: none; } <div> <h3>Border</h3> <span>borderColor</span> <input type="color" id="borderColor"> <h3>Background</h3> <span>backgroundColor</span> <input type="color" id="backgroundColor"> </div>Gracias por la ayuda de antemano : )
Espero no haberme equivocado en tu pregunta :-D
var spanTag = document.querySelectorAll("span"); var inputTag = document.querySelectorAll("input"); for (let i = 0; i < spanTag.length; i++) { spanTag[i].addEventListener('click', funcRun) function funcRun() { if (i == 0) { inputTag[i].style.display = "inline-block"; inputTag[i+1].style.display = "none"; } else if (i == 1) { inputTag[i].style.display = "inline-block"; inputTag[i-1].style.display = "none"; } } } input { display: none; } <div> <h3>Border</h3> <span>borderColor</span> <input type="color" id="borderColor"> <h3>Background</h3> <span>backgroundColor</span> <input type="color" id="backgroundColor"> </div>que ?
Creo que estás buscando element.nextElementSibling . uso:
document.querySelectorAll("span").forEach( sp => { let nextEl = sp.nextElementSibling sp.onclick =_=> nextEl.classList.toggle('noDisplay') nextEl.onclick =_=> nextEl.classList.add('noDisplay') nextEl.onchange =_=> sp.style.setProperty('--myColor', nextEl.value) }) input { display: inline-block; } .noDisplay { display: none; } span { --myColor : black; cursor : pointer; border-bottom : 3px solid var(--myColor) } <div> <h3>Border</h3> <span>borderColor</span> <input type="color" id="borderColor" class="noDisplay"> <h3>Background</h3> <span>backgroundColor</span> <input type="color" id="backgroundColor" class="noDisplay"> </div>Otra solución con mover <input type="color"> cerca del <span>
pero es sin garantías, y aquí todavía hay problemas, por ejemplo en caso de cancelación. Los selectores de colores de los distintos tipos de navegadores no se hacen amigos entre sí, y menos con código JS
const colorChooser = document.querySelector('#color-chooser') colorChooser.onclick=_=> { colorChooser.disabled = true colorChooser.ref = null } colorChooser.onchange=_=> { colorChooser.sp.style.setProperty('--onColor', colorChooser.value) colorChooser.classList.add('noDisplay') colorChooser.disabled = false } document.querySelectorAll("span.colorChoose").forEach( sp => { let spPos = { top: (sp.offsetTop -10) + 'px' , left: (sp.offsetLeft + sp.offsetWidth +10)+'px' } sp.onclick =_=> { if (!colorChooser.classList.toggle('noDisplay', colorChooser.ref===sp.id)) { colorChooser.value = sp.style.getPropertyValue('--onColor') colorChooser.style.top = spPos.top colorChooser.style.left = spPos.left colorChooser.ref = sp.id colorChooser.sp = sp } else { colorChooser.ref = null colorChooser.disabled = false } } }) .noDisplay { display : none; } span.colorChoose { cursor : pointer; border-bottom : 3px solid var(--myColor) } span.colorChoose:before { content : ' '; display : inline-block; width : .9em; height : .9em; border : 1px solid black; margin-right : .2em; background : var(--onColor); } #color-chooser { position : absolute; top : 0; left : 0; } <input type="color" id="color-chooser" value="" class="noDisplay"> <div> <h3>Border</h3> <span id="border-id-ref" class="colorChoose" style="--onColor:#ff0000">borderColor</span> <h3>Background</h3> <span id="bg-id-ref" class="colorChoose" style="--onColor:#00ff00">backgroundColor</span> </div>